scroll-timeline
scroll-timeline CSS 简写属性用于定义一个命名滚动进度时间轴，该时间轴通过在顶部和底部（或左侧和右侧）之间滚动可滚动元素（滚动器）来推进。scroll-timeline 设置在提供时间轴的滚动器上。起始滚动位置代表 0% 进度，结束滚动位置代表 100% 进度。如果 0% 位置和 100% 位置重合（即，滚动容器没有可供滚动的溢出），则时间轴处于非活动状态。
scroll-timeline 可以包含两个组成值——命名滚动进度时间轴的名称，以及一个可选的滚动轴值。
然后，该名称在 animation-timeline 声明中被引用，以指示用于通过滚动动作驱动动画进度的容器元素。
注意：如果滚动器在轴方向上没有溢出其容器，或者溢出被隐藏或裁剪，则不会创建时间轴。
构成属性
此属性是以下 CSS 属性的简写：
语法
/* two values: one each for scroll-timeline-name and scroll-timeline-axis */
scroll-timeline: --custom_name_for_timeline block;
scroll-timeline: --custom_name_for_timeline inline;
scroll-timeline: --custom_name_for_timeline y;
scroll-timeline: --custom_name_for_timeline x;
scroll-timeline: none block;
scroll-timeline: none inline;
scroll-timeline: none y;
scroll-timeline: none x;
/* one value: scroll-timeline-name */
scroll-timeline: none;
scroll-timeline: --custom_name_for_timeline;
scroll-timeline 简写属性可以作为 <scroll-timeline-name> 和 <scroll-timeline-axis> 值的组合应用于容器元素。必须指定其中至少一个值。如果同时指定了这两个值，则顺序必须是 <scroll-timeline-name> 值在前，<scroll-timeline-axis> 值在后。
注意：<scroll-timeline-name> 值必须是 <dashed-ident> 值，这意味着它们必须以 -- 开头。这有助于避免与标准 CSS 关键字发生名称冲突。
值
<scroll-timeline-name>-
请参阅
scroll-timeline-name。 <scroll-timeline-axis>-
请参阅
scroll-timeline-axis。默认值为block。
正式定义
| 初始值 | 作为简写中的每个属性
|
|---|---|
| 应用于 | 滚动容器 |
| 继承性 | 否 |
| 计算值 | 作为简写中的每个属性
|
| 动画类型 | 作为简写中的每个属性
|
正式语法
scroll-timeline =
[ <'scroll-timeline-name'> <'scroll-timeline-axis'>? ]#
<scroll-timeline-name> =
[ none | <dashed-ident> ]#
<scroll-timeline-axis> =
[ block | inline | x | y ]#
示例
创建命名滚动进度时间线动画
在此示例中，使用 ID 为 container 的元素上的 scroll-timeline-name 属性定义了一个名为 --square-timeline 的滚动时间轴。然后，通过 animation-timeline: --square-timeline 将其应用于 #square 元素上的动画。
HTML
示例的 HTML 如下所示。
<div id="container">
<div id="square"></div>
<div id="stretcher"></div>
</div>
CSS
容器的 CSS 将其设置为使用 scroll-timeline 属性命名为 --square-timeline 的滚动时间轴的来源。它还将用于时间轴的滚动条设置为垂直滚动条（实际上不需要这样做，因为它是默认值）。
容器的高度设置为 300px，如果内容溢出，容器也会创建垂直滚动条（下面 stretcher 元素上的 CSS height 规则确实会使内容溢出其容器）。
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline: --square-timeline y;
/* Firefox supports the older "vertical" syntax */
scroll-timeline: --square-timeline vertical;
position: relative;
}
下面的 CSS 定义了一个正方形，它根据 animation-timeline 属性提供的时间轴旋转，该属性设置为上面命名的 --square-timeline 时间轴。
#square {
background-color: deeppink;
width: 100px;
height: 100px;
animation-name: rotateAnimation;
animation-duration: 1ms; /* Firefox requires this to apply the animation */
animation-timeline: --square-timeline;
position: absolute;
bottom: 0;
}
#stretcher {
height: 600px;
background: #dedede;
}
@keyframes rotateAnimation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
stretcher CSS 规则将块高度设置为 600px，这会创建溢出容器元素的内容，从而创建滚动条。如果没有此元素，内容将不会溢出容器，将没有滚动条，因此也没有与动画时间轴关联的滚动时间轴。
结果
滚动垂直条以查看正方形在您滚动时进行动画处理。
正方形在您滚动时进行动画处理，并且在使用 scroll-timeline 时，动画持续时间取决于滚动速度（尽管如此，已定义 animation-duration 属性，以便您可以看出由滚动驱动的动画）。
规范
| 规范 |
|---|
| 滚动驱动动画 # scroll-timeline-shorthand |
浏览器兼容性
加载中…