Scroll-driven Animations 与 ViewTimeline 交互动画实践

Scroll-driven Animations 与 ViewTimeline 交互动画实践概述滚动驱动动画允许以滚动进度替代时间轴控制动画。Chromium 系列已支持核心能力，Firefox 需特定设置与 `animation-duration` 兼容处理，Safari 支持在演进中，应提供回退。关键参数/概念（已验证）`animation-timeline: view()` 与 `view-timeline-name`：绑定元素视图时间线。非线性进度与性能：避免昂贵的布局与重绘，使用合成层属性（opacity/transform）。Firefox 兼容：设置极短 `animation-duration: 1ms` 以确保应用动画。实践/示例.card { view-timeline-name: card; animation-timeline: card; animation-name: fadeUp; animation-duration: 1ms; /* 兼容 Firefox */ } @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } 回退策略：不支持时移除绑定，降级为静态样式或轻量 JS（IntersectionObserver）。验证方法设备与浏览器矩阵：Chrome 120+/Firefox 122+/Safari 18+（逐步验证）。性能：使用 Performance 面板与 RUM 对比滚动期间的长任务与帧率。可访问性：尊重 `prefers-reduced-motion`，提供关闭动画选项。注意事项控制动画密度，避免滚动受阻与输入延迟上升。优先使用 GPU 合成属性，减少布局与绘制开销。参考资料MDN：CSS scroll-driven animations、animation-timeline