Scroll-Driven Animations 实战指南：纯 CSS 实现滚动驱动的视差与进度条

## Scroll-Driven Animations 实战指南：纯 CSS 实现滚动驱动的视差与进度条

还记得为了实现一个滚动进度条、视差效果或者元素入场动画，需要引入 GSAP、AOS 或者 Intersection Observer 吗？好消息是，CSS 现在原生支持滚动驱动动画了！本文将带你快速上手这个前端新利器。

### 什么是 Scroll-Driven Animations？

Scroll-Driven Animations（滚动驱动动画）是 CSS 新推出的特性，允许动画的进度直接绑定到滚动容器的滚动进度，而无需任何 JavaScript。它有两种主要形式：

- **Scroll Progress Timelines**：动画进度跟随滚动条位置 - **View Progress Timelines**：动画进度跟随元素在视口中的可见程度

### 1. 滚动驱动基础：动画绑定滚动进度

核心思路是用 `animation-timeline: scroll()` 替代默认的时间轴：

```css @keyframes shrink-header { from { height: 120px; background: rgba(255,255,255,0); } to { height: 60px; background: rgba(255,255,255,0.95); box-shadow: 0 2px 12px rgba(0,0,0,0.1); } }

.site-header { position: fixed; top: 0; left: 0; width: 100%; animation: shrink-header 1s linear forwards; animation-timeline: scroll(root); } ```

就这么几行代码，页面滚动时导航栏自动从透明大标题收缩为带阴影的紧凑样式，完全不用 JS 监听滚动事件！

### 2. 阅读进度条：两行 CSS 搞定

```css @keyframes progress { from { width: 0%; } to { width: 100%; } }

.progress-bar { position: fixed; top: 0; left: 0; height: 4px; background: linear-gradient(90deg, #6366f1, #a855f7); animation: progress 1s linear forwards; animation-timeline: scroll(root); } ```

效果与任何 JS 实现的进度条完全一致，但代码量减少 90% —— 没有 `scroll` 监听，没有 `requestAnimationFrame`，纯 CSS 搞定。

### 3. 元素入场动画：View Timeline 实战

`view()` 时间轴让元素在滚动进入视口时自动播放动画：

```css @keyframes fade-in-up { from { opacity: 0; transform: translateY(60px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } }

.card { animation: fade-in-up 1s ease-out forwards; animation-timeline: view(); animation-range: entry 0% entry 100%; } ```

这里的 `animation-range: entry 0% entry 100%` 表示动画从元素刚进入视口开始，完全进入视口为止。你也可以用 `cover` 或 `exit` 来控制更复杂的阶段。

### 4. 视差滚动效果

```css @keyframes parallax { from { transform: translateY(0); } to { transform: translateY(-200px); } }

.parallax-bg { animation: parallax 1s linear forwards; animation-timeline: scroll(root); } ```

搭配 `will-change: transform` 让效果更流畅，适合首页 Banner、产品展示等场景。

### 5. 实用技巧与注意事项

**动画范围控制：** ```css /* 从滚动到 20% 位置开始，到 80% 位置结束 */ animation-range: entry-crossing 20% exit-crossing 80%; ```

**动画线速控制：** ```css /* 用 linear 保证进度与滚动同步 */ animation-timing-function: linear; ```

**兼容性检查：** 目前 Chrome 115+、Edge 115+ 已完整支持。对于不支持的浏览器，可以用 `@supports` 提供回退方案：

```css @supports (animation-timeline: scroll()) { /* 优先使用滚动驱动动画 */ }

@supports not (animation-timeline: scroll()) { /* 回退到 Intersection Observer 方案 */ } ```

### 总结

Scroll-Driven Animations 让前端开发者可以零 JS 实现滚动相关的动画效果，代码更简洁、性能更优（动画直接运行在合成线程）。从进度条到视差效果，从入场动画到黏性导航，滚动驱动动画正在重新定义我们对滚动交互的实现方式。

大胆尝试吧，未来已来！

---

*本文由云宝 AI 助手撰写，参考腾讯云开发者社区前端技术分享，实践于 [佛系豪豪吖 - 个人技术博客](https://blog.rmzdb.cloud)*

本文为作者原创，未经授权禁止转载、洗稿、搬运。如需引用请保留原文链接。