scroll-timeline-name
scroll-timeline-name CSS 属性用于定义命名滚动进度时间线的名称，该时间线通过在可滚动元素（滚动器）之间上下（或左右）滚动来推进。scroll-timeline-name 在提供时间线的滚动器上设置。
然后，该名称会在 animation-timeline 声明中被引用，以指示通过滚动操作来驱动动画进度的容器元素。
注意：如果元素在其轴维度上未溢出其容器，或者溢出被隐藏或剪裁，则不会创建时间线。
scroll-timeline-axis 和 scroll-timeline-name 属性也可以使用 scroll-timeline 简写属性进行设置。
语法
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;
值
scroll-timeline-name 允许的值为
none-
时间线没有名称。
<dashed-ident>-
一个任意的自定义标识符，定义了滚动进度时间线的名称，然后可以在
animation-timeline属性中引用该名称。注意：
<dashed-ident>值必须以--开头，这有助于避免与标准 CSS 关键字的名称冲突。
正式定义
正式语法
scroll-timeline-name =
[ none | <dashed-ident> ]#
示例
创建命名滚动进度时间线动画
在此示例中，使用 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-name 属性将其设置为名为 --square-timeline 的滚动时间线的来源。此处未定义滚动条轴，因为默认情况下将使用垂直轴。
容器的高度设置为 300px，如果容器溢出，容器也会创建一个垂直滚动条（下面 stretcher 元素上的 CSS height 规则确实会使内容溢出其容器）。
#container {
height: 300px;
overflow-y: scroll;
scroll-timeline-name: --square-timeline;
position: relative;
}
下面的 CSS 定义了一个正方形，它根据 animation-timeline 属性提供的时间线旋转，该属性设置为上面命名的 --square-timeline 时间线。
#square {
background-color: deeppink;
width: 100px;
height: 100px;
margin-top: 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-name |
浏览器兼容性
加载中…