"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