2 分钟学会纯 CSS 滚动动画：根据滚动条或元素位置执行动画

我们在使用 CSS 实现动画的时候，是以时间为基础的。keyframes 里的百分比，会根据 animation 属性中指定的时间来分配：

.someElement {
  animation: aniamte 1s linear;
}

@keyframes animate {
  0%{}    /* 0s */
  25%{}
  50%{}   /* 1s */
  100%{}  /* 2s */
}

现在，CSS 出了一个新特性，让我们可以按滚动来实现动画，这就是 CSS 滚动驱动动画。

滚动的方式有两种：

• 一种是以距离最近的父组件的滚动条的滚动，keyframes 百分比根据滚动条的位置计算。
• 另一种是按元素自身出现的位置来执行动画，就是说元素从底部滚动出来，到上方滚动出去的过程，keyframes 的百分比根据元素位置进行计算。

利用 CSS 滚动驱动动画可以实现：

• 视差效果
• 全屏阅读进度
• 幻灯片
• reveal 出现动画

配置 CSS 滚动动画

那要使用 CSS 滚动驱动动画，我们需要配置 animation-timeline 属性来指定滚动方式，使用 scroll() 函数可以按最近父元素的滚动条实现动画。scroll() 函数接收两个参数：

• 第一个参数是根据哪个元素的滚动执行动画，它可以取 3 个值：
  • neareast - 最近的有滚动条的父元素，这个是默认值
  • root - 根元素的滚动条，也就是最顶级的
  • self - 元素自身的滚动条
• 第二个参数指定方向，可以指定：
  • block - 块级方向，这是默认的
  • inline - 行级方向
  • y - 纵向
  • x - 横向
  • 所以有 block 和 inline 是因为当文字是横向书写的，那么 block 相当于 y，inline 相当与 x，而竖写的文字则 block 相当与 x，inline 相当于 y，这样会比较灵活。

animation-timeline: scroll(root block); 
/* nearest, root, self */
/* block inline y x */

然后再定义动画 keyframes 并使用 animation 属性指定动画即可，要注意的是这里 animation 就不能指定时间了：

@keyframes move200 {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 -200px;
  }
}

.someElement {
  animation: move200 linear;
}

如果要按元素位置来执行动画，可以使用 view() 函数,view 也接收两个参数：

• 第一个参数也是指定方向，可以取同样的 block、inline、y和x
• 第二个参数指定 offset，即元素滚动执行动画的区间，不指定则是整个滚动区域，可以指定两个值指定开始和结束区域。

animation-timeline: view(block 50% 10%);

使用 view() 实现动画，还可以指定 animation-range 属性，来定义元素自身出现在什么位置开始动画，在什么位置结束动画，它可以取的值有：

• entry - 元素上边界开始进入到滚动的可视区域中到完全进入结束
• exit - 元素开始离开滚动可视区域到完全离开结束
• entry-crossing - 元素从进入开始到完全进入之间
• exit-crossing - 元素离开开始到完全离开之间
• cover - 元素上边界进入到滚动区域，到下边界完全离开。
• contain - 元素完全在滚动区域之中。

可以分别指定开始和结束区间，每个关键字后面可以跟上百分比偏移，例如：animation-range: entry 0% entry 100% 表示元素进入动画，从上边界进入开始，到下边界与浏览器底部相交结束，如果开始和结束的关键字相同，偏移为 0% 到 100%，可以只写关键字，例如这里可以简写为 entry：

animation-range: entry 0% entry 100%
animation-range: entry

这张图描述了 animation-range 各个值的范围，这些关键字指定的区域会有重合，可以看情况选择最贴近动画执行过程的。

兼容性

目前 CSS 滚动驱动动画在 Chrome 和 Edge 浏览器中实现了，其他浏览器兼容情况可以参考 can i use 网站：

示例

我们来看两个具体的例子，第一个例子实现了两个图片视差滚动的效果，使用 scroll() 根据根元素的滚动执行动画，第一个图片的动画使用了 translate () 属性来加速它的上移。

第二个例子利用了 view() 实现了图片的进入特效，在它进入时放大、透明度设置为 0，然后完全进入并到 50% 的位置时还原为正常状态，这样就有了一个从放大到缩小的动画。

小结

好了，这个就是 CSS 滚动驱动动画的介绍，你学会了吗？如果有帮助请三连并关注，想学更多的开发知识，可以在评论区留言，感谢观看！