CSS 滚动驱动动画

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

滚动驱动时间轴有两种类型

• 滚动进度时间轴：您可以通过从上到下（或从左到右）然后再次滚动可滚动元素（滚动器）来推进此时间轴。滚动范围中的位置被转换为进度百分比 — 开始时为 0%，结束时为 100%。
• 视图进度时间轴：您根据元素（称为主体）在滚动器中的可见性变化来推进此时间轴。主体在滚动器中的可见性作为进度百分比进行跟踪 — 默认情况下，当主体首次在滚动器的一侧可见时，时间轴为 0%，当它到达另一侧时为 100%。

当这些时间轴中的一个应用于动画元素时，动画将沿着该时间轴前进，而不是遵循默认的基于时间的时间轴。

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

• 开始和结束动画范围值可以应用于动画，以调整动画在时间轴上的起始和结束位置。
• 视图进度时间轴可以应用开始和/或结束内边距（或外边距）来调整滚动视口（有关更多详细信息，请参阅 滚动容器）的位置，其中主体元素被认为是可见的。换句话说，这允许您指定开始和/或结束内边距（或外边距）值来抵消时间轴本身的位置。