scroll-timeline-name

有限可用性

此功能不是基线，因为它在一些最广泛使用的浏览器中无法使用。

实验性：这是一个实验性技术
在生产环境中使用此功能之前，请仔细查看浏览器兼容性表。

scroll-timeline-name CSS 属性用于定义命名滚动进度时间线的名称，该时间线通过滚动可滚动元素（滚动器）在顶部和底部（或左侧和右侧）之间进行进度。scroll-timeline-name 设置在将提供时间线的滚动器上。

然后在 animation-timeline 声明中引用该名称，以指示用于通过滚动操作驱动动画进度的容器元素。

注意：如果元素在轴维度上没有溢出其容器，或者溢出是隐藏或裁剪的，则不会创建时间线。

scroll-timeline-axis 和 scroll-timeline-name 属性也可以使用 scroll-timeline 简写属性设置。

语法

css
scroll-timeline-name: none;
scroll-timeline-name: --custom_name_for_timeline;

值

scroll-timeline-name 允许的值为

none

时间线没有名称。

<dashed-ident>

一个任意的自定义标识符，用于定义滚动进度时间线的名称，然后可以在 animation-timeline 属性中引用该名称。

注意：<dashed-ident> 值必须以 -- 开头，这有助于避免与标准 CSS 关键字发生名称冲突。

正式定义

初始值none
应用于滚动容器
继承否
计算值none 或标识符的有序列表
动画类型不可动画

正式语法

scroll-timeline-name = 
  [ none | <dashed-ident> ]#

示例

创建命名滚动进度时间线动画

在此示例中，使用 scroll-timeline-name 属性在 ID 为 container 的元素上定义了一个名为 --squareTimeline 的滚动时间线。然后使用 animation-timeline: --squareTimeline 将其应用于 #square 元素上的动画。

HTML

下面显示了示例的 HTML 代码。

html
<div id="container">
  <div id="square"></div>
  <div id="stretcher"></div>
</div>

CSS

容器的 CSS 将其设置为名为 --squareTimeline 的滚动时间线的来源，使用 scroll-timeline-name 属性。此处没有定义 滚动条轴，因为默认情况下将使用垂直轴。

容器的高度设置为 300px，并且还设置为在溢出时创建垂直滚动条（下面的 stretcher 元素上的 CSS height 规则确实使内容溢出其容器）。

css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline-name: --squareTimeline;
  position: relative;
}

下面的 CSS 定义了一个正方形，它根据 animation-timeline 属性提供的时间线旋转，该属性设置为上面命名的 --squareTimeline 时间线。

css
#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: --squareTimeline;
  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

浏览器兼容性

BCD 表只在启用 JavaScript 的浏览器中加载。

另请参阅