CSS scroll-driven animations

CSS scroll-driven animations模块提供了基于CSS动画模块和Web Animations API构建的功能。它允许您基于滚动时间线上的进度来动画属性值，而不是基于默认的基于时间的文档时间线。这意味着您可以通过滚动可滚动元素来动画元素，而不仅仅是通过时间的流逝。

有两种基于滚动的时间线：

• scroll progress timeline：通过滚动可滚动元素（scroller）从上到下（或从左到右）并返回来推进此时间线。滚动范围内的位置被转换为进度百分比 — 开始时为0%，结束时为100%。
• view progress timeline：基于可滚动元素内元素（称为subject）可见性的变化来推进此时间线。主题在可滚动元素内的可见性被跟踪为进度百分比 — 默认情况下，当主题首次出现在可滚动元素的一个边缘时，时间线为0%，当它到达相反边缘时为100%。

当这两种时间线之一应用于动画元素时，动画会沿着该时间线推进，而不是遵循默认的基于时间的时间线。

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

• 可以将开始和结束动画范围值应用于动画，以调整动画沿着时间线的开始和结束位置。
• 视图进度时间线可以应用开始和/或结束内嵌（或外嵌）值，以调整被视为可见的主题元素的滚动端口（有关更多详细信息，请参阅Scroll container）的位置。换句话说，这允许您指定开始和/或结束内嵌（或外嵌）值，这些值会偏移时间线本身的位置。