一、滚动时间轴
CSS 滚动驱动动效指的是将动画的执行（播放）过程由页面（或滚动容器）的滚动进行接管。也就是说，CSS 滚动驱动的动画只会跟随滚动容器的滚动进度而变化，即滚动条滚动了多少，动画就播放多少，时间已不再起作用。
换句话说，CSS 滚动驱动动画又是如何改变动画的时间线呢？为此，CSS 滚动驱动动效规范（Scroll-driven Animations）定义了两种改变动画的时间线，用于控制 CSS 动画播放进度：
- 滚动进度时间线 （Scroll Progress Timeline），简称
scroll-timeline，代表容器已滚动的距离，从0% ~ 100%
- 视图进度时间线 （View Progress Timeline），简称
view-timeline，代表一个在容器内的元素相对于滚动距离的相对位置，从0% ~ 100%
在 CSS 中，我们可以使用
animation-timeline 属性将这些时间轴附加到动画。整个 CSS 滚动驱动动效所涵盖的 CSS 属性如下图所示：
注意，CSS 的
animation-timeline 属性是 CSS Animations Level 2 规范中新增的一个 CSS 属性！它可以接受的值有 auto （默认值） 、none 、<custom-ident> 、scroll() 或 view() 。二、滚动时间轴范围
用户只需要向下滚动页面一定的距离（例如滚动条距顶部
100px ）就可以让页面右侧底部“返回顶部按钮”完全出现，那就需要使用 CSS 的 animation-range 属性，也就是“动画时间轴范围”。animation-range 属性能够指定动画应该播放的范围，这也是 CSS 滚动驱动动效的另一个重要特性。根据具体的使用场景，它也分为滚动时间轴范围和视图时间轴范围。在详细介绍它们之前，我们简单地先了解一下 animation-range 属性。CSS 的
animation-range 属性是 animation-range-start 和 animation-range-end 的简写属性：animation-range-start指定动画的播放范围的开始，相应地移动动画的开始时间（例如，当动画播放的次数为1，映射为@keyframes关键帧的0%进度）
animation-range-end指定动画的播放范围的结束，可能会改变动画的结束时间（例如，当动画播放的次数为1，映射为@keyframes关键帧的100%或截断动画的活动间隔）
动画现在从
entry 0%（动画元素即将进入滚动容器）运行到 entry 100%（动画元素已完全进入滚动容器）。你可能发现了，在上面的示例代码中，
animation-range 属性的值有一些关键词，例如 entry 。这些关键词表示视图时间轴范围：cover表示视图进度时间轴的完整范围，即动画元素首次开始进入滚动容器可视区（0%）到完全离开的过程（100%），也就是动画元素只需要和可视范围有交集（默认）
entry表示主框进入视图进度可见性范围的范围，即动画元素进入滚动容器可视区的过程，刚进入是0%，完全进入是100%
exit表示主框退出视图进度可见性范围的范围，即动画元素离开滚动容器可视区的过程，刚离开是0%，完全离开是100%
entry-crossing表示主框跨越结束边框边缘的范围
exit-crossing表示主框跨越起始边框边缘的范围
contain表示主框完全位于或完全覆盖滚动端口内视图进度可见性范围的范围。这取决于动画元素比滚动条更高还是更短。即动画元素完全进入滚动容器可视区（0%）到刚好要离开的过程（100%），也就是动画元素必须完全在可视区才会触发