推荐一个由 Google Chrome 团队打造的 Scroll-driven Animations 动画效果展示和教学网站，让你用纯 CSS 实现丝滑的滚动驱动动画。
Scroll-driven Animations 介绍
Scroll-driven Animations 是由 Google Chrome 开发者关系工程师 Bramus 打造的一个滚动驱动动画演示和教学网站，展示了 W3C 最新的 Scroll-driven Animations 规范的各种炫酷玩法。这个规范可以让开发者用纯 CSS 将动画与滚动位置关联起来，不用写那些繁琐的 JavaScript 滚动事件监听代码，即可实现丝滑的视差效果、阅读进度条、元素入场动画等常见交互。
技术特性
- 纯 CSS 驱动：通过
scroll()和view()函数，在 CSS 中直接声明动画时间线，完全不依赖 JavaScript； - GPU 加速：动画运行在合成器线程（compositor thread），脱离主线程，60fps 流畅不掉帧；
- 与现有 API 无缝集成：兼容 CSS Animations API 和 Web Animations API (WAAPI)，现有动画代码稍微改动就能接入；
- 提供 Polyfill：对于暂不支持的浏览器，项目提供了 polyfill 进行兼容。
和传统 JS 滚动动画对比
| 对比项 | Scroll-driven Animations | 传统 JS scroll 事件 |
|---|---|---|
| 性能 | ✅ GPU 加速，主线程无负担 | ❌ 主线程监听，容易卡顿 |
| 代码量 | ✅ 几行 CSS 搞定 | ❌ 需要大量 JS 计算 |
| 帧率稳定性 | ✅ 浏览器原生保证帧同步 | ❌ 依赖 throttle/debounce |
| 开发体验 | ✅ 声明式，所见即所得 | ❌ 命令式，调试麻烦 |
| 动态内容 | ✅ 自动适配 | ⚠️ 需要手动重新计算 |
官网演示速览
Scroll-driven Animations 网站提供了十多个精品 Demo，每个都配有源码可以直接参考学习：
- Reading Progress Indicator：页面顶部阅读进度条，随滚动实时变化；
- Stacking Cards：卡片堆叠效果，滚动时卡片一张张叠加；
- Horizontal Scroll Section：垂直滚动时，横向区域自动平移；
- 3D Shoe Explorer：滚动驱动 3D 鞋子模型旋转，效果炸裂；
- Image Reveal Effects：图片随滚动渐显，各种创意遮罩动画；
- Cover Card to Fixed Header：全屏封面图滚动后缩小为固定导航栏；
- Scroll Shadows：滚动容器边缘阴影提示，滚到边界自动消失。
每个 Demo 还提供了 CSS 版本和 JS/WAAPI 版本两种实现，方便对比学习。点击页面上的 ℹ️ 图标还能看到实现原理的详细讲解。
配套工具
除了 Demo 外，网站还提供了几个实用的可视化工具：
- Scroll Timeline Progress Visualizer：可视化
scroll()时间线的进度变化，帮助理解时间线映射关系； - View Timeline Progress Visualizer：可视化
view()时间线，直观查看元素进入/离开视口的动画进度； - View Timeline Ranges Visualizer：可视化 View Timeline 的各个区间范围（entry、contain、exit 等）；
- scroll() 参数工具：交互式调整
scroll()函数的各项参数，实时预览效果。
学习资源
Scroll-driven Animations 不只是 Demo 展示，还提供了完善的免费学习资源：
- 10 集免费视频课程：从核心概念到实战拆解，每集 3-5 分钟，由 Bramus 亲自录制，发布在 Chrome for Developers 频道；
- Chrome DevTools 扩展：安装 Scroll-driven Animations Debugger 扩展，在 DevTools 中直接调试滚动动画时间线；
- 详细文档：Animate elements on scroll with Scroll-driven animations 官方文章，从上手到深入全覆盖。
快速上手
Scroll-driven Animations 是原生 CSS 特性，Chrome 115+ 已默认支持，不需要安装任何库。
1. 用 scroll() 创建滚动进度条
@keyframes grow {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
#progress-bar {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: #007bff;
transform-origin: left;
animation: grow linear;
animation-timeline: scroll(root);
}2. 用 view() 实现元素入场动画
@keyframes fade-in {
from { opacity: 0; translate: 0 40px; }
to { opacity: 1; translate: 0 0; }
}
.card {
animation: fade-in linear;
animation-timeline: view();
animation-range: entry 0% entry 80%;
}就这么简单。不需要 Intersection Observer，不需要计算 scrollTop，纯 CSS 声明式搞定，这可比我之前写的滚动监听代码流畅多了。
注意事项
- 浏览器兼容性：目前 Chrome 115+、Edge 115+ 支持，Firefox 和 Safari 可通过 polyfill 兼容；
- polyfill 性能：polyfill 基于
scroll事件实现，性能不如原生 API，推荐在 Chrome 中直接使用原生支持； - 调试建议：强烈推荐安装 Chrome DevTools 扩展，可以像调试普通动画一样调试滚动动画的时间线和关键帧。
免费开源说明
Scroll-driven Animations 本身是一个开源项目，源码可通过浏览器 view-source 直接查看，没有任何构建工具或框架，纯手写的 HTML、CSS 和 JavaScript。项目采用 Apache License 2.0 开源协议托管在 Github 上，可以自由学习和使用。
而 Scroll-driven Animations 规范本身是 W3C 的开放标准，所有现代浏览器都会陆续支持。
