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);