跳到正文
前端设计博物馆
M-06

滚动驱动动画

Scroll-Driven Animation

滚动条就是进度条：滚到哪一帧由滚动位置决定。

  • 又叫：
  • 滚动时间线
  • 滚动进度动画
  • 滚动联动动画
  • scroll timeline
  • scroll-driven animations
  • animation-timeline
展厅
动效与节奏
形态
自带滚动
播放
手动触发
关键词
新 CSS 特性 / 随滚动变化 / 合成层动画 / 动效较多 / 先查兼容
↕ 自己动手试试
M-06形态 自带滚动播放 手动触发Scroll-Driven Animation
现场演示进入现场

参数工作台

复制给 AI

随参数实时更新

用 CSS 滚动驱动动画（scroll-driven animations）做这个效果：卡片用 animation-timeline: view()、animation-range: entry 0% cover 60%，把滚动进度映射到 rotateZ(30deg) 和 opacity 上；顶部进度条用 animation-timeline: scroll() 配 transform: scaleX()。滚动事件里不要写 JS。Safari / Firefox 不支持时，用 intersection 触发一段 600ms 的普通动画兜底，并给出「不支持」的提示。

什么时候用

  • 阅读进度条、章节指示条，天然就是「滚多少走多少」
  • 卡片滚进画面时同时旋转、放大、改变饱和度
  • 希望动画跟手指位置严格对应，来回滚也要能正反播

适用场景：滚动 / 页面 / 导航

推荐取值

时间线函数
animation-timeline: scroll() 或 view()
动画区间
animation-range: entry 0% cover 40%
进度条实现
transform: scaleX()，不用 width
旋转幅度
15–45deg，超过就喧宾夺主

别搞混

  • 和「滚动揭示 scroll reveal」的区别

    揭示是进视口触发一次就播完，之后和滚动位置无关；滚动驱动动画的每一帧都绑在滚动位置，同一个位置永远是同一帧，往回滚会倒着播。

  • 和「用 scroll 事件写 JS 动画」的区别

    scroll 事件在合成线程之外触发，滚快了会掉帧；animation-timeline 由合成器驱动，不占主线程，但要现代浏览器（Chrome 115+）才支持。

容易踩的坑

  • animation-range 不写就用默认值，动画可能在元素刚露头时就播完，看着像没生效
  • 用 JS 在 scroll 事件里读 scrollTop 再写样式，每帧同步读写会掉帧，交给 CSS 或 rAF 节流
  • animation-timeline 在 Safari 和 Firefox 上的支持还不完整，必须准备不用动画也能看的静态版本（本 demo 里有降级指示）
  • 进度条用 scaleX 做，别改 width，后者每帧都要重排

无障碍降级

prefers-reduced-motion: reduce 时把时间线换成普通的固定时长动画，或让元素直接停在进度终点，进度条这类指示物保留但不跟着滚。

关键词

  • animation-timeline
  • scroll()
  • view()
  • animation-range
  • scroll-driven animations
  • scroll progress
  • requestAnimationFrame fallback

参考

相关展品