今天，我们将把基于滚动的动画作为animation-timeline的一部分，目前，如果您想链接和动画滚动滚动，则必须在JS中聆听滚动事件并更新，又要聆听样式直接或某些CSS变量滴下来。但是即将到来，我们有能力定义除经过的几秒钟/毫秒以外的时间表，就像往常一样，这些帖子对此功能的支持尚不存在，但它却慢慢地推出了（Chrome Canary在写作时拥有它）。
什么是动画时间表？
从历史上看.fade-element {
animation: fade-animation-name 300ms linear;
}
@keyframes fade-animation-name {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
动画启动后立即使用此动画，.fade-element需要300ms才能从0不透明度变为1不透明度。由于动画函数是线性的，因此我们知道，如果我们以210毫秒的不透明度查看此动画将为0.7。研究不同的动画功能超出了此博客的范围，但是让我知道您是否希望我介绍它。
想象一下，如果我们可以停止使用时间作为我们唯一的时间表，而可以使用屏幕上的元素的百分比，或者我们在滚动位置400px和600px之间有多远。
这正是动画时间表。我们使用两个称为animation-timeline和animation-range的新CSS属性。
.fade-element {
animation: fade-animation-name linear;
animation-timeline: scroll();
animation-range: 0 100vh;
}
什么是滚动动画时间表？
正如我们在上一节中涉及的某种涉及的卷轴时间表，它们是Scroll Progress Timeline和View Progress Timeline。
滚动进度时间表
此时间轴连接到容器的滚动位置，您可以选择哪个容器以及哪个轴。
要使用滚动时间轴，您必须将animation-timeline设置为scroll()。如您所见，这是一个CSS函数，它需要两个参数。
第一个参数：
这是应使用条的元素。
-
nearest（默认） - 任一平面滚动的第一个祖先。 -
root-根元素（身体）。
第二个参数：
要使用的轴。
-
block（默认） - 块轴这是根据写作模式更改的，但在英语中，这是垂直的（上下）。 -
inline-在线轴再次根据写作模式进行更改，但英语是水平的（左右）。 - 垂直 - 始终垂直（上下）。
- 水平 - 始终水平（左右）。
.fade-element {
animation: fade-animation-name linear;
animation-timeline: scroll(block root);
}
默认情况下，滚动时间轴将使用整个页面从0％滚动到100％滚动的整个页面，但这可能并不总是您想要的。您可能只想在网站的前50％或前100VH中运行动画。使用animation-range属性，很容易设置此设置。
.fade-element {
animation: fade-animation-name linear;
animation-timeline: scroll(block root);
animation-range: 20vh 80vh;
}
animation-range属性确实会有所更改，这取决于您使用的时间轴类型，但使用滚动简单的是启动滚动位置和结束滚动位置，默认为0% 100%。
查看进度时间表
视图时间轴基于组件及其与视图端口的关系。这种类型的时间表为view()，但只有一个参数，即要使用的轴。
.fade-element {
animation: fade-animation-name linear;
/* this could be block | inline | vertical | horizontal */
animation-timeline: scroll(block);
}
正如我提到的早期所暗示的那样，animation-range属性在这里也发生了变化，因为现在我们有6个不同的范围可以使用这些范围是cover，entry，exit，entry-crossing，entry-crossing，exit-crossing和contain。有了这些，您可以根据元素在元素上运行不同的动画。
封面
当元素首次接触屏幕的底部并在元素退出屏幕时结束时，此范围开始。
条目
当元素第一次接触屏幕的底部并在元素的最后一部分完全在屏幕上时结束时，此范围开始。
退出
当元素首次开始离开屏幕并在元素的最后一部分完全离屏幕时结束时，此范围开始。
入门交叉
这与条目相同。
出口交叉
这与出口相同。
包含
当元素满足屏幕屏幕上并在元素首次开始离开屏幕时结束时，此范围开始。
@bramus有一个great tool，您可以用来帮助可视化这些含义。
.fade-element {
animation: fade-animation-name linear;
animation-timeline: scroll(block);
animation-range: entry;
}
View()时间轴介绍了最后一个名为view-timeline-inset的CSS属性。此属性更改页面的起点和终点的位置。取决于轴，它需要宽度或高度的百分比，并且可能为正或负数。
.fade-element {
animation: fade-animation-name linear;
animation-timeline: scroll(block);
animation-range: entry;
view-timeline-inset: 10%;
}
演示
帖子开始时有一个一些演示，只是为了满足您的食欲，如果您想查看该代码的代码，这是sandbox10，但这里还有另一个演示可以展示可能的。
滚动动画
在此演示中，我有一个100VH的粘头标头，我向下滚动一个动画播放显示其背后的内容。当我们滚动时，我还必须移动主要内容，以确保它看起来静态。
这是GIF
出口/入口动画
在这里，我夸大了元素的退出和进入，使它们看起来像是在弹跳中弹跳（通过新的CSS linear easing function实现了弹跳效应），然后放大。
再次是后备GIF，以防万一。
结束
哇，CSS确实达到了步伐！似乎有太多要跟上的事情，不是我介意。您想在CSS中看到哪些新功能？