在现代Web体验中，滚动驱动的视觉效果——比如视差滚动、阅读进度条、元素渐显——已经成为标配。长久以来，这些效果只能通过JavaScript监听scroll事件来实现，不仅代码繁琐，还容易引发性能问题。现在，CSS 滚动驱动动画（Scroll-driven Animations） 让我们可以用纯CSS创建这些丝滑的效果，利用浏览器原生机制，获得更流畅的帧率和更简洁的代码。本文将带你从零开始，通过三个由浅入深的实战案例，全面掌握这一革命性特性。
认识滚动驱动动画：告别JavaScript时代
传统的滚动动画依赖于window.addEventListener('scroll', ...)，在主线程中计算滚动位置并更新样式。这种方式存在几个痛点：代码侵入性强、需要处理节流防抖、重绘开销大，尤其在低性能设备上容易产生卡顿。CSS滚动驱动动画将动画的时间轴直接连接到滚动进度，浏览器可以在合成器线程上优化执行，不阻塞主线程，从而保证60fps的流畅体验。
目前，该规范包含两种关键的时间线：
- Scroll Timeline（滚动时间线）：基于滚动容器的滚动偏移量来驱动动画。
- View Timeline（视图时间线）：基于元素在滚动容器中的可见性来驱动动画。
借助@keyframes定义动画，再通过animation-timeline: scroll()或animation-timeline: view()将其附加到对应时间线，就可以实现零JavaScript的滚动驱动效果。
核心概念与两种时间线：Scroll Timeline 与 View Timeline
在深入案例之前，我们先理解基本语法。定义一个普通动画与以往相同，使用@keyframes。然后通过新属性animation-timeline将其绑定到滚动进度。
Scroll Timeline 语法：
.element {
animation: fade-in 1s linear;
animation-timeline: scroll();
}
scroll() 函数可以接收两个参数：滚动容器（nearest 或 root）和轴方向（block、inline、x、y）。默认是scroll(nearest, block)，即使用最近的滚动祖先的垂直滚动。
View Timeline 语法：
.element {
animation: appear 1s linear;
animation-timeline: view();
}
view() 函数可以指定偏移量，控制动画的起止位置，例如view(block 80% 20%)表示元素顶部距离视口底部80%时开始，元素底部距离视口顶部20%时结束。这使得我们可以精确控制元素从进入视口到离开视口的动画进度。
现在，让我们通过三个实战案例，将理论知识变为可见的效果。
案例一：页面头部视差滚动背景
视差滚动是一种常见的视觉效果：背景图片以不同于前景文本的速度移动，营造深度感。传统实现依赖JavaScript或CSS的transform: translateY()配合scroll事件。借助Scroll Timeline，我们可以直接让背景的垂直位置随页面滚动而平滑变化。
HTML结构：
<header class="hero">
<div class="hero-content">
<h1>探索CSS滚动驱动动画</h1>
<p>向下滚动观看视差效果</p>
</div>
</header>
CSS核心代码：
.hero {
height: 100vh;
overflow: hidden;
position: relative;
/* 背景图片设置 */
background-image: url('hero-image.jpg');
background-size: cover;
background-position: center;
/* 绑定滚动驱动的动画 */
animation: parallax-bg linear;
animation-timeline: scroll(root);
animation-range: 0% 100%;
}
@keyframes parallax-bg {
from {
background-position-y: 0%;
}
to {
background-position-y: 30%;
}
}
这里animation-timeline: scroll(root)使用根滚动容器（即浏览器视口）的滚动进度。随着页面从顶部滚动到底部，背景的垂直位置从0%移动到30%，产生了比页面滚动更慢的视差效果。整个过程无需任何JavaScript，动画直接由浏览器合成器处理，性能极佳。
你还可以同时为前景元素添加向上移动的动画，进一步增强立体感：
.hero-content {
animation: move-up linear;
animation-timeline: scroll(root);
animation-range: 0% 50%;
}
@keyframes move-up {
from {
transform: translateY(0);
}
to {
transform: translateY(-100px);
}
}
案例二：阅读进度条动画
许多博客页面顶部有一条水平进度条，随着阅读进度逐渐填满。用CSS滚动驱动动画可以非常简单地实现，且进度更新完全由浏览器优化。
HTML结构：
<div class="progress-bar"></div>
CSS核心代码：
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 4px;
background: linear-gradient(90deg, #ff6b6b, #ffd93d);
/* 动画控制 */
animation: progress linear;
animation-timeline: scroll(root);
transform-origin: left center;
}
@keyframes progress {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
这里我们将进度条固定在顶部，并赋予一个从scaleX(0)到scaleX(1)的关键帧动画。动画时间线绑定到根滚动进度，因此当用户从页面顶部滚动到底部时，进度条会水平填满整个屏幕宽度。由于使用了transform属性，浏览器可以将其合成到单独的图层，避免了重绘开销。
如果你希望进度条在页面滚动到一定位置后停止（例如页脚之前），可以使用animation-range属性控制起止点：
.progress-bar {
animation-range: 0% 80%; /* 在页面80%处完成进度 */
}
案例三：卡片列表滚动淡入效果
滚动时让内容逐条淡入是一种优雅的呈现方式。View Timeline 天生适合此场景，因为它根据元素相对于视口的可见性来驱动动画。我们无需计算每个元素的位置，只需为每个卡片添加统一的动画和animation-timeline: view()。
HTML结构：
<div class="card-list">
<div class="card">卡片内容1</div>
<div class="card">卡片内容2</div>
<div class="card">卡片内容3</div>
<div class="card">卡片内容4</div>
<div class="card">卡片内容5</div>
</div>
CSS核心代码：
.card {
opacity: 0;
transform: translateY(30px);
/* 每个卡片独立的动画，但时间线都基于自身的视图进度 */
animation: fade-in-slide linear;
animation-timeline: view();
animation-range: entry 10% entry 80%;
animation-fill-mode: both;
}
@keyframes fade-in-slide {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
关键点在于animation-range: entry 10% entry 80%，它定义了动画的起止时机：当卡片的顶部进入视口10%的位置时动画开始，当卡片顶部到达视口80%的位置时动画结束。这意味着卡片在向上滚动逐渐进入视野的过程中完成淡入和位移。每个.card独立计算自己的视图进度，因此它们会依次显现，形成流畅的级联效果。
如果想实现更丰富的效果，比如从左侧飞入或者缩放弹出，只需修改@keyframes中的属性，动画时间线保持不变。这种声明式的方式让设计师和开发者都能快速调整动画感觉，而无需触碰逻辑代码。
浏览器兼容性与渐进增强策略
截至2024年底，CSS 滚动驱动动画已在 Chrome 115+、Edge 115+ 中得到完整支持，Firefox 在layout.css.scroll-driven-animations.enabled标志后也提供了实验性支持，Safari 仍在开发中。对于尚未支持的浏览器，我们可以采用渐进增强的策略：默认提供一个静态样式，再为支持该特性的浏览器附加滚动动画。
最简单的做法是使用@supports规则：
@supports (animation-timeline: scroll()) {
.hero {
animation: parallax-bg linear;
animation-timeline: scroll(root);
}
.progress-bar {
animation: progress linear;
animation-timeline: scroll(root);
}
.card {
animation: fade-in-slide linear;
animation-timeline: view();
}
}
/* 在不支持的浏览器中提供回退样式 */
.hero {
background-position-y: 0; /* 静态背景 */
}
.progress-bar {
transform: scaleX(0); /* 隐藏进度条或使用固定值 */
}
.card {
opacity: 1;
transform: translateY(0); /* 直接显示 */
}
这样，在旧的浏览器中页面仍然正常可读，只是缺少动画效果；而在现代浏览器中，用户能享受到丝滑的滚动互动。结合自动前缀工具（如Autoprefixer），可以进一步提升兼容性覆盖。
此外，对于生产环境，建议使用@keyframes和animation简写时注意与旧版属性的分离，避免浏览器因不理解新语法而整体丢弃规则。
总结与展望
CSS 滚动驱动动画为Web动效开启了全新的可能性，它让开发者在样式表中就能定义复杂的滚动交互，而无需编写JavaScript。通过本文的三个案例——视差背景、进度条和列表淡入，我们覆盖了 Scroll Timeline 和 View Timeline 的核心用法，也探讨了兼容性处理方案。
回顾关键要点：
- 两种时间线：
scroll()基于滚动容器偏移，view()基于元素可见性。 - 动画绑定：使用
animation-timeline将关键帧动画连接到滚动进度。 - 精细控制：
animation-range可定义动画的起止区间，实现精确的时序。 - 性能优势：动画在合成器线程上运行，不干扰主线程，保证流畅度。
随着浏览器的进一步支持，CSS滚动驱动动画将成为未来Web动效的标准方式。现在开始在你的项目中尝试它，既能提升用户体验，又能简化代码架构，何乐而不为？
