滚动驱动动画（Scroll-Driven Animations）是一种强大的Web动画技术，它允许动画的播放进度与用户的滚动行为紧密关联。这意味着，动画不再是简单地开始、结束或循环，而是随着页面滚动而前进或后退，从而创造出独特的视觉叙事效果，例如视差滚动、元素渐入渐出、进度条等。
早期的滚动驱动动画规范曾采用@scroll-timeline等CSS规则，但随着Web动画API的不断发展和完善，该规范及其语法经历了重大重写。因此，一些基于旧版语法的示例（例如早期的一些Codepen演示）已不再兼容现代浏览器或最新的规范。理解这一变化是成功实现滚动驱动动画的关键。当前推荐的实现方式主要依赖于CSS中的animation-timeline、scroll-timeline以及animation-range等新属性。
新的滚动驱动动画语法将动画与特定的滚动容器（或文档根元素）关联起来，并通过定义动画范围来控制动画的激活时机和进度。
animation-timeline: 该属性用于指定动画所关联的时间线。它可以是一个命名的滚动时间线（scroll()）或视图时间线（view()）。
scroll-timeline: 用于定义一个具名的滚动时间线。它需要一个scroll-timeline-name和一个scroll-timeline-axis（block或inline，通常为block表示垂直滚动）。
.scroll-container {
scroll-timeline-name: --my-scroll-timeline;
scroll-timeline-axis: block;
overflow-y: scroll; /* 确保容器可滚动 */
}
.animated-element {
animation-timeline: --my-scroll-timeline; /* 关联到具名时间线 */
}animation-range: 这是实现复杂滚动驱动动画（尤其是多元素交错动画）的关键。它定义了动画在时间线上的激活范围。animation-range可以接受一个或两个范围值，每个值由一个关键字（如entry, exit, cover, contain）和可选的百分比或长度偏移量组成。
例如，animation-range: entry 0% cover 50%; 表示当元素顶部进入视口时动画开始（0%），当元素被视口覆盖到50%时动画达到100%进度。
针对原始问题中“希望每个元素在滚动时逐个渐入，反向滚动时逐个渐出”的需求，animation-range配合view()时间线是理想的解决方案。每个元素可以拥有相同的动画效果，但通过animation-range来控制其各自的激活时机。
示例代码：
假设我们有一系列 .armor-item 元素，我们希望它们在进入视口时渐入，离开时渐出。
HTML 结构:
<div class="container"> <div class="armor-item">Item 1</div> <div class="armor-item">Item 2</div> <div class="armor-item">Item 3</div> <div class="armor-item">Item 4</div> <div class="armor-item">Item 5</div> </div>
CSS 样式:
/* 基础样式，确保元素可见且有足够的间距 */
body {
margin: 0;
font-family: sans-serif;
background-color: #f0f0f0;
min-height: 200vh; /* 确保页面有足够的滚动空间 */
}
.container {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 50vh; /* 确保初始时元素不在视口内 */
padding-bottom: 50vh;
}
.armor-item {
width: 200px;
height: 150px;
margin-bottom: 100px; /* 元素间距，以便逐个进入视口 */
background-color: #3498db;
color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* 动画定义 */
animation: fade-in-out linear forwards;
animation-timeline: view(); /* 关联到元素的可见性时间线 */
/*
animation-range 解释：
entry 0%: 当元素顶部进入视口时动画开始 (0%进度)。
cover 50%: 当元素被视口覆盖到50%时动画达到100%进度。
exit 0%: 当元素底部刚要离开视口时动画开始反向 (0%进度)。
exit 100%: 当元素完全离开视口时动画结束反向 (100%进度)。
这里为了实现进入渐入、离开渐出，我们将动画分为两部分：
1. 进入视口时从透明到不透明 (animation-range: entry 0% cover 50%)
2. 离开视口时从不透明到透明 (animation-range: exit 0% exit 100%)
但一个 animation-range 只能定义一个连续范围。
更常见且简单的方法是定义一个完整的动画范围，让元素在视口内时完全可见，进入/离开时渐变。
例如：
animation-range: entry 0% cover 50%; // 进入时渐入
animation-range: exit 50% exit 100%; // 离开时渐出 (需要两个动画或更复杂的关键帧)
对于同时实现进入渐入和离开渐出，通常会使用一个更宽泛的 range，并在关键帧中处理。
或者更直接的：
animation-range: entry 0% exit 100%; // 整个动画贯穿元素在视口内的生命周期
*/
animation-range: entry 0% exit 100%; /* 动画从元素进入视口开始，到完全离开视口结束 */
opacity: 0; /* 默认隐藏 */
transform: translateY(50px); /* 默认向下偏移 */
}
/* 定义动画关键帧 */
@keyframes fade-in-out {
0% {
opacity: 0;
transform: translateY(50px);
}
20% { /* 元素进入视口20%时，开始完全显示并回到原位 */
opacity: 1;
transform: translateY(0);
}
80% { /* 元素离开视口80%时，保持完全显示 */
opacity: 1;
transform: translateY(0);
}
100% { /* 元素完全离开视口时，渐出并向下偏移 */
opacity: 0;
transform: translateY(50px);
}
}在这个例子中，每个 .armor-item 都被赋予了相同的 fade-in-out 动画。由于 animation-timeline: view() 的设置，每个元素的动画进度都独立地与其自身在滚动视口中的可见性关联。当一个元素进入视口时，它的动画开始播放；当它离开视口时，动画反向播放或继续播放到结束。通过调整 animation-range 中的百分比和关键帧，可以精确控制动画的触发时机和效果。
滚动驱动动画是一个相对较新的实验性Web API。虽然现代浏览器（如Chrome）正在积极支持，但为了在更广泛的浏览器环境中提供一致的体验，通常需要引入 Polyfill。
目前，推荐的Polyfill是来自 W3C Fugu API Incubator 的 scroll-timeline Polyfill。您可以在以下地址找到： https://rawcdn.githack.com/flackr/scroll-timeline/55c54c10ccf3308f36c09cbca4935286fe99f14f/dist/scroll-timeline.js (这是一个示例链接，请务必从官方或可靠渠道获取最新版本)。
引入 Polyfill 的方式：
<script src="path/to/scroll-timeline.js"></script>
请注意，Polyfill 仅用于提供兼容性，其性能可能不如原生实现。在生产环境中，应根据目标用户群体的浏览器分布情况来决定是否以及如何使用 Polyfill。
Web动画API中的滚动驱动动画为创建沉浸式和交互性强的网页体验提供了强大的能力。通过理解其最新的语法规范，特别是animation-timeline和animation-range等核心属性的应用，开发者可以精确控制动画的播放时机和效果。对于多元素动画，view()时间线结合animation-range是实现交错、逐个渐入/渐出效果的有效途径。虽然目前仍需Polyfill来确保广泛的兼容性，但随着浏览器对新规范的支持日益完善，滚动驱动动画无疑将成为未来Web设计的重要趋势。在实践中，务必关注性能、可访问性，并利用浏览器工具进行有效调试，以交付高质量的用户体验。
以上就是深入理解Web动画API与滚动驱动动画：新版语法与多元素实践的详细内容，更多请关注php中文网其它相关文章！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
636
收藏
