不能落后，好好缕缕CSS滚动动画
内容提要
本文介绍了CSS滚动动画的实现方法和应用场景，包括scroll-timeline和animation-timeline属性的使用，滚动指示器和滚动视区内的动画效果，以及timeline-scope属性和scroll-timeline的衍生作用。同时，还讲解了如何检测滚动溢出和控制动画范围。了解本文介绍的几个经典案例已经足够。
延伸解读
兼容性现状与学习时机
文章指出，CSS滚动动画推出已有一年，但Safari浏览器至今尚未支持。作者认为尽管存在兼容性限制，但许多开发者已在生产环境使用，因此值得提前学习。对于需要兼容Safari的项目，目前可能仍需谨慎；若目标用户主要使用Chrome等已支持浏览器，则可尝试应用。
核心属性与实现思路
实现滚动动画主要依赖scroll-timeline、view-timeline和animation-timeline三个属性。scroll-timeline定义滚动时间线，animation-timeline指定动画使用的时间线，view-timeline则基于元素在滚动容器中的位置。文章通过滚动指示器和图片缩放淡出两个案例，展示了如何用少量CSS代码替代以往复杂的JavaScript实现。
timeline-scope扩展动画范围
默认情况下，滚动动画仅作用于滚动容器内的元素。若希望容器外的元素也响应滚动，可使用timeline-scope属性提升时间线的作用范围。例如将timeline-scope设置在body上，容器外的图片即可随容器滚动而旋转放大。这为跨容器动画提供了新的可能，但需注意作用域提升可能带来的样式冲突。
检测滚动溢出的巧妙方案
文章重点介绍了一种利用scroll-timeline检测滚动溢出的方法：通过动画重置CSS变量--flag，再结合容器查询的style()语法，动态显示“更多”按钮。该方案代码固定、可复用，被作者称为最有价值的一段代码。它展示了CSS滚动动画与容器查询结合解决实际问题的潜力，但需注意容器查询style()目前仅支持CSS变量。
Q&A
CSS滚动动画的主要属性有哪些？
主要属性包括scroll-timeline、view-timeline和animation-timeline。
如何使用CSS实现滚动指示器？
可以通过设置scroll-timeline属性和animation-timeline属性来实现滚动指示器。
timeline-scope属性有什么作用？
timeline-scope属性可以改变动画时间线的作用范围，使容器外的元素也能参与动画。
如何检测一个元素是否滚动溢出？
可以使用scroll-timeline属性结合CSS动画来检测元素是否滚动溢出。
view-timeline属性的作用是什么？
view-timeline属性用于根据元素在滚动容器中的位置来控制动画进度。
CSS滚动动画的兼容性问题如何解决？
目前由于兼容性限制，建议了解几个经典案例即可应对大部分情况。
