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

概述滚动驱动动效允许将滚动进度映射为动画时间线。通过命名时间线与在动画上引用，实现组件级复用与更精细控制。需遵循可访问与动效偏好。示例（概念语法，以浏览器支持为准）.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 讨论与规范：相关仓库