滚动驱动动画

定义

滚动驱动动画（Scroll-driven Animations）是 CSS 动画规范的扩展，允许将动画的时间轴从「时钟时间」替换为「滚动进度」，使元素随页面滚动播放动画，而不依赖 scroll 事件监听。

核心概念

• scroll timeline：以某滚动容器的滚动位置作为进度，通过 animation-timeline: scroll() 绑定；
• view timeline：以元素进出滚动视口的可见进度作为时间轴，通过 view() 绑定，并可用 animation-range 限定起止区间。

示例

``css .progress { animation: grow linear; animation-timeline: scroll(root); } `` 可实现阅读进度条、视差滚动、图片随滚动淡入等常见效果。

优势

传统做法在 scroll 事件里改样式，运行于主线程且易掉帧；滚动驱动动画可由合成器线程直接驱动，滚动多快动画就多流畅。

支持情况

Chromium 系浏览器已率先支持，其他引擎逐步跟进，生产环境使用需注意降级方案。