Scroll-driven Animations Scroll Timelines 页面滚动驱动动画实践

Scroll-driven Animations Scroll Timelines 页面滚动驱动动画实践概述使用 `@scroll-timeline` 与 `animation-timeline`（或 JS API）将滚动位置映射到动画进度，实现高性能、声明式的滚动驱动动画。技术背景CSS 声明式时间线与 `view-timeline` 能力在现代浏览器中已提供。无需监听滚动事件即可实现高性能动画。核心内容CSS 基本用法@scroll-timeline scroller-timeline {

source: auto;

orientation: block;

}

.hero {

animation: fadeIn 1s linear both;

animation-timeline: scroller-timeline;

animation-range: entry 0% cover 60%;

}

@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }

JS API（可组合控制）const timeline = new ScrollTimeline({ source: document.scrollingElement });

document.querySelector('.hero').animate(

[{ opacity: 0 }, { opacity: 1 }],

{ timeline, rangeStart: '0%', rangeEnd: '60%' }

);

技术参数与验证测试环境浏览器: Chrome 120+ / Safari 17+验证要点在性能面板观察主线程负载与帧率；同场景对比滚动事件驱动实现。验证不同 `animation-range` 与 `orientation` 下的效果一致与性能差异。应用场景长页面叙事、组件进场动画、可视化过渡。注意事项控制动画范围避免过度动画影响可用性；支持 `prefers-reduced-motion` 降级。跨浏览器差异需准备 JS Fallback。参考资料Scroll-driven Animations 指南：https://developer.chrome.com/docs/web-platform/scroll-driven-animations