Scroll-driven Animations 滚动驱动动画与时序控制实践

Scroll-driven Animations 滚动驱动动画与时序控制实践概述滚动驱动动画将滚动位置作为时间轴，避免使用昂贵的滚动事件与主线程计算，实现流畅的入场/出场与视差效果。核心概念与参数CSS 时间轴：`@scroll-timeline` 定义时间轴；`animation-timeline` 指定动画来源。区间控制：`animation-range: entry 0% exit 100%` 绑定元素进入/离开视窗的区间。JS API：`new ScrollTimeline({ source, axis, scrollOffsets })` 用于更复杂场景。特性检测：`CSS.supports('animation-timeline: scroll()')` 或 `'ScrollTimeline' in window`。实践示例<style>

@scroll-timeline hero-timeline {

source: auto;

}

.hero {

animation-name: fadeUp;

animation-duration: 1s;

animation-timeline: hero-timeline;

animation-range: entry 0% exit 100%;

}

@keyframes fadeUp {

from { opacity: 0; transform: translateY(16px); }

to { opacity: 1; transform: translateY(0); }

}

</style>

<section class="hero">内容</section>

<script>

if (!CSS.supports('animation-timeline: scroll()')) {

// 降级：用 IntersectionObserver + WAAPI 驱动一次性入场动画

const el = document.querySelector('.hero');

const io = new IntersectionObserver(([e]) => {

if (e.isIntersecting) el.animate([

{ opacity: 0, transform: 'translateY(16px)' },

{ opacity: 1, transform: 'translateY(0)' }

], { duration: 600, easing: 'ease-out' });

}, { threshold: 0.2 });

io.observe(el);

}

</script>

验证方法性能：对比滚动事件驱动与 CSS 时间轴方案的主线程占用（Performance 面板）。一致性：在不同 DPI/缩放下确保动画区间与节奏稳定。可访问性：尊重 `prefers-reduced-motion`，在该偏好下禁用滚动驱动动画。注意事项避免与粘性定位/硬件加速冲突导致抖动；谨慎使用高成本滤镜。大量视差元素建议在栅格化后复用纹理，控制绘制次数。保持入场动画短促，避免用户滚动被动画阻滞感。