UD5工具箱
Scroll-driven Animations（滚动驱动动画）
Scroll-driven Animations 是 W3C CSS Working Group 定义的一组 CSS 特性，允许开发者使用纯 CSS 来创建基于滚动进度或可视区域变化的动画效果。与传统的基于时间的 CSS 动画不同，滚动驱动动画的进度不再由 animation-duration 决定，而是由滚动容器的滚动位置或元素在滚动容器中的可视比例来驱动。这意味着动画的播放进度与用户的滚动行为直接绑定，无需任何 JavaScript 代码参与。该特性于 2023 年在 Chrome 115 中首次实现，标志着 CSS 在交互能力上的又一次重大飞跃。
Scroll Timeline（滚动时间线）
Scroll Timeline 是 Scroll-driven Animations 中的两种时间线类型之一。它以某个可滚动容器的滚动进度作为动画的时间基准。当用户滚动该容器时，动画的进度会根据滚动位置在 0% 到 100% 之间变化。开发者可以通过 scroll-timeline 简写属性或 scroll-timeline-name 和 scroll-timeline-axis 两个子属性来定义滚动时间线。典型的应用场景包括页面滚动进度指示器、随滚动变化的背景效果以及基于滚动位置的视差动画。
View Timeline（视图时间线）
View Timeline 是另一种时间线类型，它以目标元素在滚动容器可视区域（scrollport）中的可见比例作为动画的时间基准。当元素从滚动容器的底部边缘进入时，动画进度为 0%；当元素完全进入可视区域时，进度为 50%；当元素从顶部边缘离开时，进度为 100%。开发者通过 view-timeline 简写属性或其子属性来定义视图时间线。View Timeline 非常适合实现文章段落的渐入效果、列表项的交错动画等场景。
animation-timeline 属性
animation-timeline 是一个 CSS 属性，用于指定动画所使用的时间线类型。它接受 scroll() 或 view() 函数作为值，也可以引用通过 scroll-timeline-name 或 view-timeline-name 定义的命名时间线。例如 animation-timeline: scroll() 表示使用默认的滚动时间线，animation-timeline: view() 表示使用视图时间线。该属性是连接 CSS 动画和滚动驱动机制的核心桥梁。
animation-range 属性
animation-range 是一个 CSS 属性，用于指定动画在时间线上的执行范围。它接受两个百分比值，分别表示动画的起始位置和结束位置。例如 animation-range: 20% 80% 表示动画仅在时间线的 20% 到 80% 之间执行。该属性还可以使用 animation-range-start 和 animation-range-end 两个子属性分别设置起始和结束值。合理的范围设置可以避免动画在滚动的开头或结尾阶段出现不自然的跳变。
scroll() CSS 函数
scroll() 是一个 CSS 函数，用作 animation-timeline 属性的值，表示使用滚动容器的滚动进度作为动画时间线。该函数接受一个可选参数来指定滚动轴方向，可选值包括 block、inline、x 和 y。例如 scroll(block) 表示使用块向滚动进度，scroll(x) 表示使用水平滚动进度。如果省略参数，默认使用 block 方向。该函数是创建基于滚动位置动画的最简便方式。
view() CSS 函数
view() 是一个 CSS 函数，用作 animation-timeline 属性的值，表示使用元素在滚动容器可视区域中的可见比例作为动画时间线。该函数同样接受一个可选的轴方向参数。当元素完全不可见时动画进度为 0%，完全可见时为 100%。该函数是实现元素进入/离开视口动画的核心工具，广泛应用于现代网页的滚动交互设计中。
Scrollport（滚动视口）
Scrollport 是指可滚动容器中用户可见的区域，即滚动容器的可视范围。在 CSS 规范中，scrollport 是计算 View Timeline 进度的参考基准。当目标元素的边缘与 scrollport 的边缘对齐时，对应的时间线进度分别为 0% 和 100%。理解 scrollport 的概念对于正确配置 View Timeline 的动画范围至关重要。
scroll-timeline-name 属性
scroll-timeline-name 是一个 CSS 属性，用于为滚动时间线定义一个自定义名称。通过命名时间线，开发者可以在多个动画之间共享同一条时间线，实现复杂的协调动画效果。例如，可以在滚动容器上定义 scroll-timeline-name: --my-timeline，然后在多个子元素的动画中引用 animation-timeline: --my-timeline。
view-timeline-inset 属性
view-timeline-inset 是一个 CSS 属性，用于调整 View Timeline 的计算范围。通过设置 inset 值，开发者可以控制元素需要进入 scrollport 多少距离才算开始触发动画。例如设置 view-timeline-inset: 100px 表示元素需要进入 scrollport 内部 100 像素后才开始计算时间线进度。这对于实现更精细的动画触发控制非常有用。
@keyframes 规则
@keyframes 是 CSS 中用于定义动画关键帧的规则。在滚动驱动动画中，@keyframes 的语法与传统 CSS 动画完全相同，但关键帧的百分比不再对应时间，而是对应滚动时间线的进度。例如 from { opacity: 0; } 对应时间线的 0% 进度，to { opacity: 1; } 对应 100% 进度。开发者需要理解这一区别，才能正确设计滚动驱动动画的关键帧序列。