CSS scroll-timeline-name 与 animation-timeline：滚动驱动动效细化

---

title: CSS scroll-timeline-name 与 animation-timeline：滚动驱动动效细化

keywords:

• scroll-timeline-name
• animation-timeline
• ViewTimeline
• 滚动动效
• 可访问性

description: 细化滚动驱动动效的时间线配置，使用 scroll-timeline-name 与 animation-timeline 关联滚动与动画，结合

ViewTimeline 提升组件级控制，并给出兼容与可访问策略。

categories:

• 文章资讯
• 编程技术

---

概述

滚动驱动动效允许将滚动进度映射为动画时间线。通过命名时间线与在动画上引用，实现组件级复用与更精细控制。需遵循可访问与动效偏好。

示例（概念语法，以浏览器支持为准）

.scroller { scroll-timeline-name: main; scroll-timeline-axis: block }
.fade { animation-name: reveal; animation-timeline: main; animation-duration: 1s }
@keyframes reveal { from { opacity: 0 } to { opacity: 1 } }

工程建议

• 可访问性：在 prefers-reduced-motion 时禁用或简化动效。
• 结构与性能：控制观察范围与元素数量；避免全页大量动画导致性能问题。
• 兼容：提供 JS 回退或禁用策略；测试跨平台支持。

参考与验证

• Chrome 平台文档（Scroll-driven animations）：https://developer.chrome.com/docs/web-platform/scroll-driven-animations/
• WICG 讨论与规范：相关仓库