前言：那些年被JavaScript绑架的滚动效果
做过活动页的同学肯定经历过这种场景：产品经理想要一个高端大气的“滚动叙事”页面，鼠标往下滚，背景慢慢变暗，产品卡片依次从侧面滑入，英雄区域的文字渐渐淡出。过去要实现这些，唯一的办法就是监听scroll事件，然后根据滚动位置疯狂计算各种元素的样式，再用 requestAnimationFrame 去更新。代码里到处是 offsetTop、getBoundingClientRect，还要小心翼翼地处理节流，生怕滑动时页面卡成PPT。如果页面结构稍微复杂一点，性能优化就是一场噩梦。
现在好了，CSS 终于把手伸进了滚动交互的领地。Chrome 115 开始正式支持的滚动驱动动画（Scroll-driven Animations），让我们可以用纯 CSS 定义动画的播放进度由滚动位置来控制。再也不需要写一行 JavaScript，就能让动画乖乖地跟着用户的滚动走。而且因为是浏览器原生实现，性能比 JS 方案高出不止一个档次——动画跑在合成器线程上，完全不占用主线程的资源。
这篇文章会用两个完整的实战案例，把滚动驱动动画的核心语法讲透，从最简单的进度条到完整的产品叙事页，一步一步把代码写出来，顺便也会聊聊实际用起来需要注意的兼容性和降级方案。
一、核心概念：把滚动条变成时间轴
传统的 CSS 动画通过animation-duration定义时长，动画按照时间流逝自动推进。滚动驱动动画则把这个“时长”换成“滚动距离”——动画的进度由滚动条的位置来决定。浏览器为这个机制提供了两种时间线：
- scroll progress timeline（滚动进度时间线）：关联一个可滚动容器的滚动进度。比如页面滚动了 30%，对应的动画也就执行了 30%。
- view progress timeline（视图进度时间线）：关联某个元素在滚动容器中的可见性。元素从进入视口到离开视口的过程，映射成动画的 0% 到 100%。
这两种时间线分别用 scroll() 和 view() 函数来创建，然后通过 animation-timeline 属性绑定到动画上。动画本身用 @keyframes 定义，和平时的写法完全一样。
二、第一个案例：滚动进度条
先从最简单的开始：页面顶部固定一根进度条，随着页面滚动从 0% 变宽到 100%。这个效果用滚动驱动动画来实现，代码量少得令人意外。
HTML 结构只需要一个固定的进度条元素：
<div class="progress-bar"></div>CSS 部分，定义关键帧让进度条从 scaleX(0) 到 scaleX(1)，然后通过 animation-timeline: scroll() 把它和根元素的滚动进度绑定：
.progress-bar {
position: fixed;
top: 0;
left: 0;
height: 4px;
background-color: #4a90e2;
transform-origin: left center;
animation: grow 1s linear; /* duration 只是占位，实际由时间线控制 */
animation-timeline: scroll();
z-index: 999;
}
@keyframes grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}这里的 scroll() 默认指向当前文档的根滚动条，即 scroll(root)。如果进度条需要关联某个特定容器的滚动（比如侧边栏），可以写成 scroll(#sidebar) 或者直接给容器设置 scroll-timeline-name 然后引用名字。
刷新页面，滚动一下就会看到进度条跟着变宽了。全程没有一行 JavaScript。而且你会发现这个动画流畅得不可思议——因为浏览器是把滚动位置直接映射到 transform，中间的每一帧都是 GPU 合成出来的，不会触发重排和重绘。
三、第二个案例：产品叙事页——让元素在滚动时动起来
进度条只是热身，接下来搞一个更像真实项目的例子。假设我们要做一个产品介绍的单页，页面包含三个部分：顶部封面大图、中间三个特性卡片、底部一个 CTA 按钮。要求封面区域的标题随着滚动逐渐模糊并缩小，三个卡片在进入视口时分别从下方滑入，底部按钮在接近视口中心时放大弹入。
3.1 封面标题的视差淡化
封面标题固定在页面顶部，我们希望它随着滚动距离逐渐缩小并降低不透明度。可以用 scroll() 时间线直接关联根滚动条，并在关键帧里定义变化范围。
.hero-title {
position: fixed;
top: 40vh;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
animation: hero-fade 1s linear;
animation-timeline: scroll();
}
@keyframes hero-fade {
0% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(0); }
30% { opacity: 1; transform: translate(-50%, -50%) scale(0.8); filter: blur(2px); }
100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); filter: blur(8px); }
}滚动前 30% 的过程中标题保持清晰但略微缩小，之后迅速淡出并模糊。不需要 JavaScript 去算 scrollTop，浏览器自动把滚动进度映射到关键帧的时间百分比上。
3.2 卡片入场动画——认识 view()
三个特性卡片分布在页面中间区域，我们希望每个卡片在进入视口底部时从下方滑入，在视口中完全可见时处于正常位置。这种“元素进出视口”的场景，正是 view() 时间线大显身手的地方。
首先定义卡片的动画，让它们从下方 60px 处移动到原位，同时淡入：
.card {
animation: slide-in 1s ease-out;
animation-timeline: view();
}
@keyframes slide-in {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}默认情况下 view() 的进度范围是元素首次进入视口底部到元素完全离开视口顶部。这意味着动画只有在元素处于滚动容器的可见范围内时才会播放。当卡片滚出视口后，动画停止在最后一帧。如果希望卡片每次进入视口都重新播放动画，需要加上 animation-range 属性来调整作用区间。
.card {
animation: slide-in 1s ease-out;
animation-timeline: view();
animation-range: entry 10% cover 40%;
}animation-range 的值是 entry（进入）、exit（离开）、cover（完全覆盖）等关键字的组合，后面可以跟百分比来精细控制。上面这行表示动画在元素刚进入视口 10% 的位置开始，在元素覆盖视口 40% 的位置结束。这样调出来的效果是：卡片从底部刚冒头时就开始动了，到达页面中间时正好完成动画，看起来非常自然。
3.3 CTA 按钮的弹性放大
底部 CTA 按钮我们希望它在接近视口中央时有一个弹性放大的效果，然后保持。同样用 view() 时间线，关键帧使用贝塞尔曲线模拟弹性：
.cta-button {
animation: pop-in 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
animation-timeline: view();
animation-range: entry 80% cover 50%;
}
@keyframes pop-in {
from { transform: scale(0.8); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}这里把 animation-range 的结束点设在 cover 50%，意思是当按钮到达视口中央时动画刚好结束。配合贝塞尔曲线反弹，会出现一个很舒服的弹性效果。
四、多个时间线协同与命名时间线
真实页面里经常会有多个滚动容器。比如一个页面的主内容区滚动，侧边栏有自己的滚动，每个区域又都有自己独立的滚动驱动动画。这时候需要用到命名时间线。
给滚动容器定义时间线名称：
.main-content {
overflow-y: auto;
scroll-timeline-name: --main-timeline;
scroll-timeline-axis: y;
}
.sidebar {
overflow-y: auto;
scroll-timeline-name: --sidebar-timeline;
scroll-timeline-axis: y;
}动画中通过 animation-timeline: --main-timeline 或 animation-timeline: --sidebar-timeline 来指定绑定哪个容器的滚动。
如果同一个元素上需要响应两个不同的滚动容器（比如一个元素的 X 偏移跟着主内容区，Y 偏移跟着侧边栏），可以定义两个动画并分别指定时间线：
.floating-element {
animation:
move-x 1s linear,
move-y 1s linear;
animation-timeline:
--main-timeline,
--sidebar-timeline;
}这种机制让多轴联动的交互变得异常简单。
五、性能、调试与兼容性考量
5.1 动画属性选择
滚动驱动动画跑在合成器线程，因此只有合成器线程能处理的属性才能获得最佳性能。transform 和 opacity 是绝对首选。如果你在关键帧里改了 width、height 或者 margin，动画就会回落到主线程执行，带来卡顿风险。所以案例中所有动画都只用了 transform 和 opacity，并且尽量用 scale 来代替尺寸变化。
5.2 调试技巧
Chrome DevTools 对滚动驱动动画的支持已经很友好。打开 Animations 面板，能在时间轴里看到绑定了 scroll-timeline 的动画，并且可以直接拖动滚动条来观察动画进度。如果动画没反应，首先检查容器是否生成了滚动条（内容是否超出），以及 animation-range 的设置是否合理。
5.3 浏览器兼容与渐进增强
目前 Chrome 115+、Edge 115+ 完全支持 scroll() 和 view()。Firefox 在 110+ 版本也通过 layout.css.scroll-driven-animations.enabled 标志支持，但默认未开启。Safari 方面，WebKit 团队已经公开表示正在实现中。
对于不支持的浏览器，可以采用 @supports 查询来做降级处理。例如：
/* 基础样式：静态展示 */
.card {
opacity: 1;
transform: translateY(0);
}
/* 检测滚动驱动动画支持 */
@supports (animation-timeline: scroll()) {
.card {
animation: slide-in 1s ease-out;
animation-timeline: view();
}
}在不支持的浏览器里，卡片会直接以正常样式展示，用户仍然能浏览所有内容，只是少了入场动画。对于大部分页面来说，这种降级是完全可接受的。
六、总结与思考
滚动驱动动画改变的不只是写动画的方式，它其实重新定义了前端实现滚动交互的思维模式。过去我们总是习惯性地先在全局加个 scroll 监听，然后分发事件给各个组件。现在可以把“滚动过程”本身当作动画的关键帧控制线，直接将视觉变化委托给浏览器引擎。
从项目落地角度来说，当前已经可以在 Chrome 系的现代浏览器中放心使用，并且配合 @supports 处理其他浏览器。随着 Safari 和 Firefox 的跟进，未来一两年内，滚动驱动动画极有可能成为页面叙事和动态交互的标配工具。想想那些曾经为了一个视差效果引入几百行 JS 和第三方库的日子，可能真的快要结束了。
