CSS ScrollTimeline-ViewTimeline 滚动驱动动画实践 进度条-元素入场

概览ScrollTimeline 能以滚动位置驱动动画进度，ViewTimeline 则根据元素进入视口的进度驱动入场。二者结合可在长页面中实现高性能的视觉反馈与入场动画。滚动进度条@keyframes fill { to { transform: scaleX(1); } } @scroll-timeline scroll-y { source: auto; orientation: block; } .progress { transform: scaleX(0); transform-origin: left; animation-name: fill; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll-y; } 元素入场动画@keyframes reveal { from { opacity: 0; translate: 0 20px; } to { opacity: 1; translate: 0 0; } } .card { view-timeline-name: --card; view-timeline-axis: block; } .card-reveal { animation-name: reveal; animation-fill-mode: both; animation-range: entry 0% cover 50%; animation-timeline: --card; } 治理要点为非支持浏览器提供无动画退化。控制动画范围与时长，避免视觉疲劳与性能浪费。与 `prefers-reduced-motion` 配合，兼顾可访问性。验证与指标浏览器：Chrome 120+、Edge 120+；Safari/Firefox 部分支持（退化可用）在长页面中动画流畅，主线程负担低