web 滚动驱动动画（scroll-driven animations, sda）允许开发者将 css 动画或 web animations api (waapi) 动画与滚动容器的滚动位置或元素在滚动容器中的可见性关联起来。这意味着动画的播放进度不再由时间决定，而是由用户的滚动行为驱动。这种特性为实现视差滚动、元素渐入渐出、进度条等效果提供了原生、高性能的解决方案，极大地提升了用户体验和开发效率。
早期，Web 滚动驱动动画的提案曾使用 @scroll-timeline 等基于 CSS @规则 的语法。然而，随着规范的不断演进和完善，该语法已被废弃并替换为更强大、更灵活的 CSS 属性。这正是许多开发者在尝试实现多元素滚动驱动动画时遇到问题的根源，因为旧的示例代码（如 Bram.us 早期的一些演示）已不再适用。
当前推荐和浏览器正在实现的 SDA 语法主要基于以下 CSS 属性：
理解这一语法转变至关重要。旧的 @scroll-timeline 语法可能导致动画无法按预期工作，尤其是在尝试对多个元素应用动画时，因为其设计和实现方式与新规范存在根本差异。
要实现多个元素的滚动驱动动画，例如让每个元素在滚动进入视口时依次渐入，我们可以利用 view-timeline 结合 animation-range。以下是一个详细的示例，演示如何使用新语法为一系列列表项创建交错的渐入动画：
首先，我们需要一个包含多个可动画元素的滚动容器。
<div class="scroll-container"> <div class="item">元素 1</div> <div class="item">元素 2</div> <div class="item">元素 3</div> <div class="item">元素 4</div> <div class="item">元素 5</div> <div class="item">元素 6</div> <div class="item">元素 7</div> <div class="item">元素 8</div> <div class="item">元素 9</div> <div class="item">元素 10</div> </div>
接下来，我们定义 CSS 动画和如何将其与滚动行为关联。
/* 滚动容器样式 */
.scroll-container {
height: 400px; /* 定义容器高度，使其可滚动 */
overflow-y: scroll; /* 启用垂直滚动 */
border: 1px solid #ccc;
padding: 20px;
background-color: #f9f9f9;
}
/* 单个元素初始样式 */
.item {
height: 150px; /* 确保元素有足够的高度，以便触发视图时间轴 */
margin-bottom: 20px;
background-color: #007bff;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
border-radius: 8px;
opacity: 0; /* 初始透明 */
transform: translateY(50px); /* 初始位置偏下 */
transition: background-color 0.3s ease; /* 鼠标悬停效果 */
}
.item:hover {
background-color: #0056b3;
}
/* 定义渐入动画 */
@keyframes fade-in-up {
to {
opacity: 1;
transform: translateY(0);
}
}
/* 应用滚动驱动动画 */
.item {
animation: fade-in-up linear forwards; /* 应用动画，线性播放，保持最终状态 */
animation-timeline: view(); /* 将动画与元素的视图时间轴关联 */
/*
animation-range 定义动画在视图时间轴上的播放范围。
'entry 25%' 表示当元素进入视口 25% 时开始动画。
'cover 50%' 表示当元素覆盖视口 50% 时动画完成。
通过调整这些值，可以控制动画的触发时机和持续时间。
对于交错效果，每个元素的动画会在其自身进入视口时独立触发。
*/
animation-range: entry 25% cover 50%;
}在这个例子中：
通过这种方式，每个 .item 都会在它自己的滚动触发点独立地执行动画，从而实现了“一个接一个”的交错动画效果，而无需复杂的 JavaScript 计算。
虽然许多 SDA 效果现在可以纯 CSS 实现，但在某些复杂场景下，你可能仍需要 JavaScript 来动态生成元素或根据特定逻辑调整动画。例如，如果你需要为每个元素设置不同的 animation-range 延迟，可以通过 JS 动态添加样式变量或内联样式：
document.addEventListener('DOMContentLoaded', () => {
const items = document.querySelectorAll('.item');
items.forEach((item, index) => {
// 示例：为每个元素设置略微不同的动画范围，以增强交错感
// 注意：这里的范围值需要根据实际效果调整
// item.style.animationRange = `entry ${20 + index * 5}% cover ${60 + index * 5}%`;
// 实际应用中，animation-range 更多用于控制动画在单个元素可见性周期内的播放。
// 如果要实现严格的交错延迟，CSS变量或更复杂的JS逻辑可能需要。
// 但对于简单的渐入，纯CSS的view()通常足够。
});
});在多数情况下，view() 配合 animation-range 的纯 CSS 方案已经足够强大，并且性能更优，因为它将动画逻辑下放给了浏览器。
Web 滚动驱动动画为创建动态、响应式的用户界面提供了强大的原生能力。理解其从旧 @scroll-timeline 到新 CSS 属性（animation-timeline、view-timeline、animation-range 等）的语法演进是成功实现这些效果的关键。通过利用 view() 时间轴和精确的 animation-range，开发者可以轻松地为多个元素创建同步或交错的滚动驱动动画，从而提供更流畅、更具沉浸感的 Web 体验。随着浏览器对 SDA 的支持日益完善，掌握这一技术将成为现代前端开发者的重要技能。
以上就是Web 滚动驱动动画 (SDA) 实践指南：新语法实现多元素同步与交错动画的详细内容，更多请关注php中文网其它相关文章！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
1002
收藏
