"滚动驱动动效：ScrollTimeline 与 ViewTimeline 实战"

概述Scroll-driven animations 允许基于滚动进度驱动动画时间线，减少手写监听与计算。`ScrollTimeline` 以容器滚动进度为时间线；`ViewTimeline` 以元素进入/离开视窗的进度为时间线。语法与示例CSS ScrollTimeline：@scroll-timeline tl { source: auto; scroll-offsets: 0%, 100%; } .hero { animation: fade 1s linear both; animation-timeline: tl; animation-range: 0% 100%; } ViewTimeline：.section { view-timeline-name: section; view-timeline-axis: block; } .title { animation: slide 1s linear both; animation-timeline: section; animation-range: entry 0% exit 100%; } WAAPI：使用 `CSSScrollTimeline` 与 `Animation` 接口在脚本中创建与控制时间线。工程与性能优先使用 `transform/opacity`；避免在滚动驱动下对布局属性动画。控制参与元素数量与范围；确保时间线源正确（容器或视窗）。参考与验证［参考1］web.dev：Scroll-driven animations 指南与示例：https://web.dev/articles/scroll-driven-animations［参考2］MDN 英文：`animation-timeline` 与滚动驱动动画说明：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline［参考3］MDN 英文：`view-timeline-name`/`view-timeline-axis` 说明：https://developer.mozilla.org/en-US/docs/Web/CSS/view-timeline-name关键词校验关键词与滚动驱动动效一致。