MODERN CSS
滚动驱动动画Scroll-Driven Animations
动画进度直接绑到滚动位置，纯 CSS 实现，不需要滚动监听 JS。是视差与滚动进度条的最优解（跑在合成线程上）。
效果预览
适合用在哪
阅读进度条、进入视口时的渐显、滚动视差、长页面叙事。
容易踩的坑
- 动画了 width、top 等布局属性，失去合成线程优势，长页面滚动掉帧。
- 忘记包裹 prefers-reduced-motion，视差位移对前庭敏感用户会造成眩晕。
- 关键内容的初始状态是 opacity:0，不支持的浏览器上内容永远不可见。
设计提示词 · Prompt
滚动驱动动画（Scroll-Driven Animations）：两种时间线 —— ① scroll()：绑到某个滚动容器的进度，如 .bar i{animation: grow linear; animation-timeline: scroll(root)}；② view()：绑到元素自身进入视口的进度，如 .card{animation: fadeIn linear; animation-timeline: view(); animation-range: entry 0% entry 60%}。关键帧里不用写 from/to 的百分比，直接用 0%→100% 表示滚动进度。animation-range 控制触发区间（entry / contain / exit）。优势是跑在合成线程、不阻塞主线程，性能远好于 scroll 事件 + JS。支持度：Chrome 115+、Safari 26+；Firefox 尚未支持，需要 @supports (animation-timeline: scroll()) 兜底为静态或 JS 实现。
Scroll-Driven Animations: two kinds of timeline — 1) scroll(): bound to a scroll container's progress, e.g. .bar i{animation: grow linear; animation-timeline: scroll(root)}; 2) view(): bound to the element's own progress entering the viewport, e.g. .card{animation: fadeIn linear; animation-timeline: view(); animation-range: entry 0% entry 60%}. In keyframes, no from/to time percentages are needed — 0%→100% directly represents scroll progress. animation-range controls the trigger range (entry / contain / exit). The advantage is it runs on the compositor thread without blocking the main thread, performing far better than scroll events + JS. Support: Chrome 115+, Safari 26+; Firefox doesn't support it yet, so use @supports (animation-timeline: scroll()) to fall back to static or a JS implementation.
常见搭配
同一页面里经常和「滚动驱动动画」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s" style="width:100%">
<div class="mc-sd">
<div class="mc-sd__bar"><i></i></div>
<div class="mc-sd__c"><i></i><i></i><i></i></div>
</div>
</div>