SCROLL EFFECT
滚动驱动动画Scroll-linked Animation
动画进度直接绑定滚动位置：滚动条就是时间轴，倒着滚动画也倒着放。
效果预览
动画进度 ↔ 滚动位置双向绑定
适合用在哪
数据展示区、产品特性长页、时间线叙事。
容易踩的坑
- 只写 animation-timeline 不做 @supports 回退，Firefox 等不支持的浏览器元素停在初始态。
- JS 兼容方案在 scroll 回调里读写布局交替，触发强制同步布局造成掉帧。
- 动画绑定区间过短，轻轻一滚就播完，用户来不及看清变化过程。
设计提示词 · Prompt
滚动驱动动画（Scroll-linked Animation）：CSS 原生方案——@keyframes 配合 animation-timeline:scroll()（相对整页滚动）或 view()（相对元素进入视口），animation-range 控制起止区间，无需 JS。兼容方案用 JS：监听 scroll 计算元素在视口中的进度 p∈[0,1]，把 p 映射到 transform/scale/宽度等属性。典型应用：进度条随滚动填充、柱状图随滚动长高（scaleY 0→1）、图片随滚动从 0.6 放大到 1。倒滚时动画自然反向——这是它与一次性入场动画的本质区别。
Scroll-linked Animation: native CSS approach — @keyframes together with animation-timeline:scroll() (relative to whole-page scrolling) or view() (relative to the element entering the viewport), with animation-range controlling the start and end range, no JS required. Fallback with JS: listen to scroll, compute the element's progress p∈[0,1] in the viewport, and map p to transform/scale/width and other properties. Typical uses: a progress bar filling with scroll, bar charts growing with scroll (scaleY 0→1), images scaling from 0.6 to 1 with scroll. Scrolling backward naturally reverses the animation — this is the essential difference from a one-time entrance animation.
常见搭配
同一页面里经常和「滚动驱动动画」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-scrolldrive"> <div class="d-scrolldrive__rail"><div class="d-scrolldrive__fill"></div><div class="d-scrolldrive__knob"></div></div> <div class="d-scrolldrive__bar"><i style="animation-delay:0s"></i><i style="animation-delay:.12s"></i><i style="animation-delay:.24s"></i><i style="animation-delay:.36s"></i><i style="animation-delay:.48s"></i></div> <span class="d-scrolldrive__tag">动画进度 ↔ 滚动位置双向绑定</span> </div>