网站建设自从滚动驱动动画在一个规范提案中被引入以来已经过去了10年，经过5年的发展，我们终于开始看到在网站上被运用起来。但是我们现在不需要JavaScript，不需要依赖，不需要库——只需要纯粹的CSS。截至2024年12月，你可以在Chrome中安全地使用滚动驱动的动画，Firefox也支持它们。
在本文中，我们将介绍W3C发布的最新版本探索两种滚动驱动的时间线—滚动进度时间线和查看进度时间表。最后，我希望你熟悉这两条时间线，不仅能够区分它们，而且有足够的信心在工作中使用它们。滚动进度时间轴将动画的时间轴链接到滚动容器沿特定轴的滚动位置。因此，动画与滚动直接相关。向前滚动时，动画也会向前滚动。你会看到我称它们为scroll-timeline动画除了称之为滚动进度时间线。
在这个例子中，有一个<div>ID为“进步”在CSS文件的末尾，你会看到它有一个背景色，一个定义好的宽度和高度，它固定在页面的顶部。还有一个动画把它从0到1沿着x轴——如果你熟悉CSS动画，这是非常标准的！
#progress {
/* ... */
animation: progressBar 1s linear;
}
@keyframes progressBar {
from { transform: scaleX(0); }
}
这progressBar动画运行一次，持续一秒钟，具有线性计时功能。链接这个动画滚动只是CSS中的一行:animation-timeline: scroll();不需要指定持续时间的秒数——滚动行为本身将决定时间。就是这样！您刚刚创建了您的第一个滚动驱动的动画！注意动画的方向是如何与滚动方向直接联系在一起的——向下滚动，进度指示器变宽；向上滚动，它变得更窄。
我们刚刚看了滚动进度动画。这是两者中第一种滚动驱动的动画。接下来，我们将注意力转向查看进度动画。这两者有很多相似之处！但是它们是不同的，足以保证我们有自己的部分来探索它们是如何工作的。你会看到我把这些称为view-timeline动画除了调用它们查看进度动画，因为它们围绕一个view()功能。
这查看进度时间表是我们看到的第二种滚动驱动的动画。它在元素进入或退出scrollport(可滚动内容的可视区域)时跟踪元素。这种行为非常类似于怎么个IntersectionObserver在JavaScript中工作但是可以完全用CSS来完成。
