CSS 滚动驱动的动画

**CSS 滚动驱动动画**模块提供了构建在CSS 动画模块和Web 动画 API之上的功能。它允许您根据基于滚动的时序而不是默认的基于时间的文档时序来动画化属性值。这意味着您可以通过滚动可滚动元素来动画化元素，而不仅仅是通过时间的推移。

有两种类型的基于滚动的时序

滚动进度时序：通过从上到下（或从左到右）以及反向滚动可滚动元素（滚动器）来推进此时序。滚动范围中的位置转换为进度百分比——开始时为 0%，结束时为 100%。
视图进度时序：基于滚动器内元素（称为主体）的可见性变化来推进此时序。滚动器内主体的可见性作为进度百分比进行跟踪——默认情况下，当主体首先在滚动器的某个边缘可见时，时序为 0%，当它到达相对边缘时，时序为 100%。

当这两个时序之一应用于动画元素时，动画将沿该时序进行，而不是遵循默认的基于时间的时序。

可以调整动画在滚动进度和视图进度时序上的有效放置，即，您可以定义动画开始和结束的位置。这可以通过几种不同的方式完成