scroll-timeline

可用性有限

此功能并非基线功能，因为它在一些最常用的浏览器中无法使用。

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

scroll-timeline CSS 简写属性 用于定义一个命名的滚动进度时间线，该时间线通过滚动可滚动元素（滚动器）在顶部和底部（或左侧和右侧）之间进行推进。scroll-timeline 设置在将提供时间线的滚动器上。起始滚动位置表示 0% 的进度，结束滚动位置表示 100% 的进度。如果 0% 位置和 100% 位置重合（即，滚动容器没有溢出可滚动），则时间线处于非活动状态。

scroll-timeline 可以包含两个组成值——命名的滚动进度时间线的名称，以及一个可选的滚动轴值。

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

注意：如果滚动器在其容器的轴尺寸中没有溢出，或者溢出被隐藏或裁剪，则不会创建时间线。

组成属性

此属性是以下 CSS 属性的简写

语法

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 ]#

示例

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

在此示例中，使用 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 属性。它还设置了要用于时间线的滚动条为垂直滚动条（这实际上不是必需的，因为它是默认设置）。

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

css
#container {
  height: 300px;
  overflow-y: scroll;
  scroll-timeline: --squareTimeline y;
  /* Firefox supports the older "vertical" syntax */
  scroll-timeline: --squareTimeline vertical;
  position: relative;
}

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

css
#square {
  background-color: deeppink;
  width: 100px;
  height: 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 时动画持续时间取决于滚动速度（尽管如此，animation-duration 属性已被定义，因此您可以看出滚动驱动的动画）。

规范

规范
滚动驱动的动画
# scroll-timeline 简写

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅