Scroll-Driven Animations ScrollTimeline 与 View-Timeline 实战

Scroll-Driven Animations ScrollTimeline 与 View-Timeline 实战概述CSS 滚动驱动动画允许将滚动进度映射为时间线，精确控制元素的入场/离场与进度展示，避免 JS 滚动监听造成的主线程抖动。核心概念与参数`scroll-timeline-name`/`scroll-timeline-axis`：定义滚动时间线与轴向（`block`/`inline`）。`view-timeline-name`/`view-timeline-axis`：以元素在视口的可见进度为时间线。`animation-timeline`：将动画绑定到指定时间线。`animation-range`：设定动画生效区间，如 `0% 100%` 或 `entry 0% exit 100%`。实践示例<style> /* 页面滚动进度条 */ .scroller { height: 100vh; overflow: auto; scroll-timeline-name: --page; scroll-timeline-axis: block; } .progress { position: fixed; left: 0; top: 0; height: 4px; width: 0; background: linear-gradient(90deg, #4f46e5, #06b6d4); } @keyframes grow { to { width: 100%; } } .progress { animation: grow 1s linear both; animation-timeline: --page; animation-range: 0% 100%; } /* 章节入场淡入 */ section { margin: 40px 0; view-timeline-name: --sec; view-timeline-axis: block; } .fade-in { opacity: 0; } @keyframes fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fade 1s ease both; animation-timeline: --sec; animation-range: entry 0% cover 50%; } </style> <div class="scroller"> <div class="progress" aria-hidden="true"></div> <section> <h2 class="fade-in">滚动驱动动画</h2> <p>章节随可见度淡入。</p> </section> <section> <h2 class="fade-in">性能友好</h2> <p>避免 JS 监听滚动。</p> </section> </div> 验证方法浏览器支持：Chrome 115+、Safari 17+（Firefox 计划中）。性能评估：使用 Performance 面板观察主线程与绘制；避免同步测量与强制布局。可访问性：尊重 `prefers-reduced-motion`，对用户禁用动画时提供静态呈现。注意事项仅在需要的元素上绑定时间线，避免全局大量动画导致合成开销。使用 `animation-range` 控制动画窗口，减少过长动画对交互响应的影响。与 View Transitions API 同时使用时，确保动画职责清晰，避免双重过渡。