【动画进阶】当路径动画遇到滚动驱动！ - ChokCoco
内容提要
本文介绍了CSS中的新特性animation-timeline，允许通过页面滚动控制动画效果。利用此特性，可以实现滚动进度条和路径动画，创造丰富的视觉效果。文章提供了示例代码，并展望了未来更多应用场景。
延伸解读
从 @scroll-timeline 到 animation-timeline
文章提到，早期 CSS 的 @scroll-timeline 特性因规范原因被废弃，而一年半后以 animation-timeline 的形式回归。这反映了 CSS 滚动驱动动画规范的迭代过程。开发者需注意旧语法已不适用，应转向新标准，以避免兼容性问题。
滚动驱动动画的浏览器支持现状
根据文章，截至 2023 年 9 月，animation-timeline 已在 Chrome 115 版本正式支持，其他浏览器也在跟进。这意味着在生产环境中使用该特性时，需考虑浏览器兼容性，可能仍需为旧版本提供回退方案。
路径动画与滚动驱动的结合方式
文章演示了如何将 motion-path 的 offset-path 动画与 animation-timeline 结合，通过简单添加 animation-timeline: scroll(root) 即可将时间驱动的路径动画转为滚动驱动。这种组合能创造出随滚动进度变化的复杂运动效果，但需注意路径坐标与滚动容器的匹配。
实现复杂效果需补充的额外知识
文章末尾提到，一个综合案例还使用了 animation-range 和 shape-outside 属性。这表明，要充分利用滚动驱动和路径动画，开发者可能需要进一步学习这些相关 API，以扩展动画控制范围和布局交互能力。
Q&A
什么是CSS中的animation-timeline特性？
animation-timeline是CSS中的新特性，允许通过页面滚动控制动画效果。
如何使用animation-timeline实现滚动进度条？
可以通过在CSS中添加animation-timeline: scroll(root)来将动画控制改为基于滚动，从而实现滚动进度条效果。
motion-path属性在CSS中有什么作用？
motion-path属性允许元素沿特定路径进行动画，支持复杂路径的动画效果。
如何结合滚动驱动和路径动画创造效果？
可以将滚动驱动的动画与motion-path结合，通过设置offset-path和animation-timeline来实现沿特定路径的滚动动画。
animation-timeline在浏览器中的支持情况如何？
截至2023年9月，animation-timeline已在Chrome 115版本中得到支持，其他浏览器也在跟进。
如何使用CSS实现复杂的路径动画？
可以使用offset-path属性定义复杂的SVG路径，并结合offset-distance进行动画控制。
