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

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