CSS 滚动驱动动画适合什么场景?
理解 scroll-driven animations 的时间轴、适用场景和浏览器支持边界,避免用滚动事件做所有动画。
参考答案
滚动驱动动画让动画进度由滚动时间轴决定,而不是由固定时间流逝决定。它适合阅读进度、视差、滚动出现和与滚动位置有明确关系的视觉效果,可以减少手写 scroll 监听和手动计算进度。
它与普通 CSS transition、固定时间的 animation 不同:滚动停止时动画进度也会停止。实现时要明确使用哪个滚动容器、时间轴范围和元素的可见性,避免嵌套滚动容器导致进度与预期不同。
该能力仍需按目标浏览器检查支持情况。不能把它当成所有设备上的必备交互;应提供静态布局和 prefers-reduced-motion 下的低动效体验。