Scroll-Driven Animations 与 ViewTimeline 页面滚动驱动动画实践

Scroll-Driven Animations 与 ViewTimeline 页面滚动驱动动画实践概述CSS Scroll-Driven Animations 提供了基于滚动进度的时间线能力，配合 ViewTimeline 可实现元素进入/覆盖/退出区间的动画，适用于长文叙事与组件渐进呈现。核心概念与参数`@scroll-timeline`：声明滚动时间线；`orientation` 控制轴向。`animation-timeline`：绑定动画到滚动或视图时间线。`animation-range`：定义动画触发区间，如 `entry 0% cover 100%`。ViewTimeline：基于元素可视区域生成时间线，支持 `view-timeline-name/axis`。实践示例@scroll-timeline my-timeline { source: auto; orientation: block; } .hero { animation: fade 1s linear both; animation-timeline: my-timeline; animation-range: entry 0% cover 100%; } @keyframes fade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .card { view-timeline-name: --card; view-timeline-axis: block; } .progress { animation: grow 1s linear both; animation-timeline: --card; animation-range: entry 0% exit 100%; } @keyframes grow { from { scale: .96; opacity: .6; } to { scale: 1; opacity: 1; } } 验证方法测试环境：Windows 11 / macOS 14；Chrome 115+ / Safari 17+（部分语法差异降级）。指标：观察 `INP` 与帧率稳定性（Performance Panel），确保主线程负载可控。A11y：尊重 `prefers-reduced-motion: reduce`，提供无动画降级样式。注意事项避免在滚动驱动动画中混入重排密集操作。控制动画范围与时长，防止过度视觉干扰。与 View Transitions 协同时，明确两者的触发边界与优先级。