In the previous article "Several new CSS features you deserve to know in 2022 (Collection and Learning)", I briefly introduced several new CSS features. Today I will take you to understand one of them in depth. New feature (animation killer): @scroll-timeline, I hope it will be helpful to everyone!
In the CSS specification Scroll-linked Animations, an epoch-making CSS feature is introduced. That is -- The @scroll-timeline at-rule, which literally translates to Scrolling Timeline.
This article will take you through it all, from getting started to learning to use CSS @scroll-timeline. (Recommended learning: css video tutorial)
What is @scroll-timeline What is the scrolling timeline?
@scroll-timeline You can set the start and end of an animation to be determined by the scrolling progress within the scroll container, not by time.
Means, We can define an animation effect, and the start and end of the animation can be controlled by scrolling the container.
Before systematically learning grammar, we use a DEMO to briefly understand its usage:
We first implement a simple font F Rotation animation :
<div id="g-box">F</div>
#g-box {
animation-name: rotate;
animation-duration: 3s;
animation-direction: alternate;
animation-easing-function: linear;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}Normally, it is such a simple animation:
Next, we combine this animation with @scroll-timeline Combined, it needs to be placed in a scrollable container:
<div id="g-box">F</div>
#g-content {
width: 300px;
height: 170vh;
background: #999;
}
#g-box {
font-size: 150px;
margin: 70vh auto 0;
animation-name: rotate;
animation-duration: 3s;
animation-direction: alternate;
animation-easing-function: linear;
animation-timeline: box-rotate;
}
@keyframes rotate {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
@scroll-timeline box-rotate {
source: selector("#g-content");
}Here, we have implemented a scrollable container #g-content, Its height is 170vh, which is 1.7 times the height of the visual interface, and the #g-box container is placed at a height of 70vh from the top ：
The interesting thing is, the rotation animation we set will not start automatically. The animation will only start when we scroll down. The actual effect Gif:
CodePen Demo -- @scroll-timeline Demo
https://codepen.io/Chokcoco/pen/JjOZMaQ
Seeing this, everyone should be able to understand the role and meaning of @scroll-timeline. It gives CSS the ability to control the progress of animation based on the scrolling of the scroll bar! Amazing! !
Next, let’s take a moment and take a brief look at the syntax of @scroll-timeline.
To use @scroll-timeline, the most important thing is to define a @scroll-timeline rule:
@scroll-timeline moveTimeline {
source: selector("#g-content");
orientation: vertical;
scroll-offsets: 0px, 500px;
}Among them:
source: auto：绑定到 Document，也就是全局 Windows 对象source: selector("id-selector")，通过 selector()，内置一个 #id 选择器，选取一个可滚动容器source: none：不指的滚动容器orientation: auto：默认为 vertical，也就是竖直方向的滚动orientation: vertical：竖直方向的滚动orientation: horizontal：水平方向的滚动orientation: block：不太常用，使用沿块轴的滚动位置，符合书写模式和方向性orientation: inline：不太常用，使用沿内联轴的滚动位置，符合书写模式和方向性scroll-offsets: none 这意味着没有 scroll-offset 指定。scroll-offsets 的理解会比较困难，我们稍后详述。
在设定了一个 @scroll-timeline 之后，我们只需要将它和动画绑定起来即可，通过 animation-timeline：
@scroll-timeline moveTimeline {
source: selector("#g-content");
orientation: vertical;
scroll-offsets: 0px, 500px;
}
div {
animation-name: move;
animation-duration: 3s;
animation-timeline: moveTimeline;
}
@keyframes move{
0% {
transform: translate(0, 0);
}
100% {
transform: translate(100%, 0);
}
}之前在 不可思议的纯 CSS 滚动进度条效果 一文中，我们介绍了一种使用渐变实现的纯 CSS 滚动进度指示器效果：
该方法有些小小的瑕疵。其中一个就是当滚动距离太短的时候，进度条右侧会有明显的斜边效果。
而有了 @scroll-timeline 之后，我们终于可以将滚动和动画这两个元素绑定起来，再实现滚动进度指示器，就已经非常轻松了：
<div id="g-container">
<p>...文本内容...</p>
</div>#g-container {
width: 100vw;
}
#g-container::before {
content: "";
position: fixed;
height: 5px;
left: 0;
top: 0;
right: 0;
background: #ffc107;
animation-name: scale;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-timeline: box-rotate;
transform-origin: 0 50%;
}
@keyframes scale {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
@scroll-timeline box-rotate {
source: auto;
orientation: vertical;
}1、我们在页面最上方，通过一个伪元素，实现一个占满屏幕 100% 的 5px 高的进度条。正常而言是这样：
2、通过设定一个 transform: scaleX(0) 到 transform: scaleX(1) 的动画，并且将它与 body 的滚动相绑定，即可得到滚动指示器，效果如下：
完整的代码，你可以戳这里：CodePen Demo - 使用 @scroll-timeline 实现滚动进度条
https://codepen.io/Chokcoco/pen/eYeKLMj
大家可以再看看上面的 Gif 图，都有一个问题，就是动画的开始时间都是从滚动一开始就开始了，刚好在滚动结束时结束。那么如果我希望动画在滚动的特定阶段触发，那该怎么办呢？
这里，就需要借助 scroll-offsets，去更加精确的控制我们的动画。
在滚动过程中，我们可以将一个元素，划分为 3 个区域：
在这里，我们就可以得到两个边界，上方边界，下方边界：
而对于上下两个边界，又会有两种状态。以上边界为例子，会有：
对于这两种状态，我们用 start 0 和 start 1 表示，同理，下方的边界也可以用 end 0 和 end 1 表示：
这里的 0 和 1 实际表示的是，元素滚动中预期可见的百分比。
有了这些状态值，配合 scroll-offsets，我们就可以精确控制滚动动画的触发时间。
我们设定一个从左向右并且伴随透明度变化的动画，的看看下面几种情况：
1、滚动动画在元素从下方开始出现时开始，完全出现后截止。
动画运行范围：end 0 --> end 1：
@keyframes move {
0% {
transform: translate(-100%, 0);
opacity: 0;
}
100% {
transform: translate(0, 0);
opacity: 1;
}
}
@scroll-timeline box-move {
source: auto;
orientation: "vertical";
scroll-offsets:
selector(#g-box) end 0,
selector(#g-box) end 1;
/* Legacy Descriptors Below: */
start: selector(#g-box) end 0;
end: selector(#g-box) end 1;
time-range: 1s;
}
#g-box {
animation-name: move;
animation-duration: 3s;
animation-fill-mode: both;
animation-timeline: box-move;
}效果如下：
2、滚动动画在元素从下方完全出现时开始，在滚动到上方即将离开屏幕后截止：
动画运行范围：end 1 --> start 1：
// ...
@scroll-timeline box-move {
source: auto;
orientation: "vertical";
scroll-offsets:
selector(#g-box) end 1,
selector(#g-box) start 1;
/* Legacy Descriptors Below: */
start: selector(#g-box) end 1;
end: selector(#g-box) start 1;
time-range: 1s;
}
// ...效果如下：
3、滚动动画在元素滚动到上方即将离开屏幕后开始，完全离开屏幕后截止：
动画运行范围：start 1 --> start 0：
// ...
@scroll-timeline box-move {
source: auto;
orientation: "vertical";
scroll-offsets:
selector(#g-box) start 1,
selector(#g-box) start 0;
/* Legacy Descriptors Below: */
start: selector(#g-box) start 1;
end: selector(#g-box) start 0;
time-range: 1s;
}
// ...效果如下：
掌握 scroll-offsets 的用法是灵活运用滚动时间线的关键，当然，在上面你还会看到 start: selector(#g-box) start 1 和 end: selector(#g-box) start 0 这种写法，这是规范历史遗留问题，最新的规范已经使用了 scroll-offsets 去替代 start: 和 end: 的写法。
把上述 3 种情况放在一起，再比较比较：
完整的代码，你可以戳这里：CodePen Demo - @scroll-timeline Demo | element-based offset
在能够掌握 @scroll-timeline 的各个语法之后，我们就可以开始使用它创造各种动画效果了。
譬如如下的，滚动内容不断划入：
代码较长，可以戳这里，来自 bramus 的 Codepen CodePen Demo -- Fly-in Contact List (CSS @scroll-timeline version)
https://codepen.io/bramus/pen/bGwJVzg
甚至可以结合 scroll-snap-type 制作一些全屏滚动的大屏特效动画：
要知道，这在以前，是完全不可能利用纯 CSS 实现的。完整的代码你可以戳这里：CodePen Demo -- CSS Scroll-Timeline Split Screen Carousel
https://codepen.io/Chokcoco/pen/QWOrPdM
简而言之，任何动画效果，如今，都可以和滚动相结合起来，甚至乎是配合 SVG 元素也不例外，这里我还简单改造了一下之前的一个 SVG 线条动画：
完整的代码你可以戳这里：CodePen Demo -- SVG Text Line Effect | Scroll Timeline
https://codepen.io/Chokcoco/pen/wvPxbRm
@scroll-timeline 虽好，目前仍处于实验室特性时间，Chrome 从 85 版本开始支持，但是默认是关闭的。
兼容性如下(2022-03-07):
在最新的 chrome、Edge、Opera 可以通过浏览器配置开启该特性，Chrome 下开启该特性需要：
浏览器 URL 框输入 chrome://flags
开启 #enable-experimental-web-platform-features
美酒虽好，但是离完全能用，浏览器大规模支持还需要等待一会，给时间一点时间吧！
基于目前的兼容性问题，我们可以通过浏览器的特性检测 @supports 语法，来渐进增强使用该功能。
特性检测的语法也非常简单：
@supports (animation-timeline: works) {
@scroll-timeline list-item-1 {
source: selector(#list-view);
start: selector(#list-item-1) end 0;
end: selector(#list-item-1) end 1;
scroll-offsets:
selector(#list-item-1) end 0,
selector(#list-item-1) end 1
;
time-range: 1s;
}
// ...
}通过 @supports (animation-timeline: works) {} 可以判断浏览器是否支持 @scroll-timeline。
目前关于 @scroll-timeline 的相关介绍还非常少，但是它确是能够改变 CSS 动画的一个非常大的革新。随着兼容性的逐渐普及，未来势必会在 CSS 中占据一席之地。
本文到此结束，希望对你有帮助 :)
（学习视频分享：web前端）
The above is the detailed content of Learn more about the new features of CSS animation: @scroll-timeline. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
