CSS 滚动驱动动画

概述

本文主要讲述CSS 滚动驱动动画（CSS scroll-driven0animations），这一特性在Chrome 115中就得到了支持。

CSS 滚动驱动动画的意义

在这个特性之前，监听浏览器滚动事件需要借助 Javascript 进行控制，但是这种传统的方式会有卡顿的问题。因为浏览器的滚动和页面的渲染是不同的进程在执行，因此只能异步传递滚动事件。而 CSS 滚动动画就是为了解决这个卡顿的问题。

CSS 滚动驱动动画指的就是将动画的执行过程由页面滚动进行接管，在这种情况下，动画只会跟随页面的滚动的变化而变化，动画执行再不用设置时长，页面滚动多少，页面执行多少。

示例展示

滚动进度示例 1

视图进度示例 2

CSS 滚动驱动动画实践

CSS 滚动驱动动画主要分为两个场景：一个是滚动进度时间线，即scroll() ,如示例 1；另一个就是视图进度时间线，即view()，如示例 2。

滚动进度时间线

滚动进度时间线（scroll progress timeline）表示页面或者容器滚动，同时将滚动的进度同步到动画进度作为动画的进度。

如下是它的语法：

/* 无参数 */
animation-timeline: scroll();

/* 设置滚动容器 */
animation-timeline: scroll(nearest); /* 最近的父元素作为滚动容器也是默认值 */
animation-timeline: scroll(root); /*文档视口作为滚动容器 */
animation-timeline: scroll(self); /*元素本身作为滚动容器*/

/* 设置滚动方向 */
animation-timeline: scroll(block); /*  块级轴方向默认 */
animation-timeline: scroll(inline); /**内联轴方向 */
animation-timeline: scroll(y); /**y轴方向滚动 */
animation-timeline: scroll(x); /**x轴方向滚动 */

/* 同时设置 */
animation-timeline: scroll(block nearest); /* 默认 */
animation-timeline: scroll(inline root);
animation-timeline: scroll(x self);

视图进度时间线

视图进度时间线 （view progress timeline），其实这个也和滚动条的滚动行为也有关系，但是关注点是元素（或称为视图）是否进入视野内，刚进入视野是0%，离开视野是100%。

其语法如下：

animation-timeline: view()

示例2中就通过view-timeline-inset指定了视野范围，即中间位置，所以只有处在中间的元素才会执行对应的动画（就是导航名称高亮）。

CSS 动画范围区间

CSS动画范围区间可以参考这篇文章https://juejin.cn/post/7259026189904805944#heading-4，介绍的非常详细。

总结

最后用@XboxYan的一张图总结