animation-timeline

可用性有限

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

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

animation-timeline CSS 属性指定用于控制 CSS 动画进度的时序。

以下类型的时序可以通过 animation-timeline 设置

默认的文档时序，它通过自文档首次加载到浏览器以来经过的时间来推进。这是传统上与 CSS 动画相关的时序，并使用 auto 值或根本不指定 animation-timeline 值来选择。
滚动进度时序，它通过在可滚动元素（滚动器）的顶部和底部（或左侧和右侧）之间滚动来推进。滚动范围内的位置将转换为进度的百分比——在开始时为 0%，在结束时为 100%。提供滚动进度时序的元素可以通过两种方式指定
- 命名滚动进度时序是指显式使用 scroll-timeline-name 属性（或 scroll-timeline 简写属性）命名提供滚动进度时序的滚动器。然后，通过将其指定为要动画化的元素的 animation-timeline 属性的值，将名称链接到该元素。
- 匿名滚动进度时序是指将要动画化的元素赋予一个 scroll() 函数作为 animation-timeline 值，该函数根据传递给它的参数选择提供滚动进度时序的滚动器以及要使用的滚动轴。
视图进度时序，它根据滚动器内元素（称为主题）的可见性变化来推进。跟踪滚动器内主题的可见性——默认情况下，当主题首次出现在滚动器的一端时，时序为 0%，当它到达另一端时，时序为 100%。与滚动进度时序不同，您无法指定滚动器——主题的可见性始终在其最近的祖先滚动器内进行跟踪。提供视图进度时序的主题可以通过两种方式指定
- **命名视图进度时间轴**是指通过使用`view-timeline-name` 属性（或`view-timeline` 简写属性）显式命名主题的时间轴。然后，通过将名称指定为要动画元素的 `animation-timeline` 属性的值，将名称链接到要动画的元素。这是一个关键点——使用命名视图进度时间轴，要动画的元素不必与主题相同。
- **匿名视图进度时间轴**是指通过将`view()` 函数作为 `animation-timeline` 值赋予主题，从而使其根据其在其最近父级滚动容器内的位置进行动画的时间轴。

注意：animation-timeline 作为仅重置值包含在`animation` 简写中。这意味着包含 `animation` 会将先前声明的 `animation-timeline` 值重置为 `auto`，但不能通过 `animation` 设置特定值。在创建`CSS 滚动驱动的动画` 时，需要在声明任何 `animation` 简写之后声明 `animation-timeline`，才能使其生效。

语法

css

/* Keyword */
animation-timeline: none;
animation-timeline: auto;

/* Single animation named timeline */
animation-timeline: --timeline_name;

/* Single animation anonymous scroll progress timeline */
animation-timeline: scroll();
animation-timeline: scroll(scroller axis);

/* Single animation anonymous view progress timeline */
animation-timeline: view();
animation-timeline: view(axis inset);

/* Multiple animations */
animation-timeline: --progressBarTimeline, --carouselTimeline;
animation-timeline: none, --slidingTimeline;

/* Global values */
animation-timeline: inherit;
animation-timeline: initial;
animation-timeline: revert;
animation-timeline: revert-layer;
animation-timeline: unset;

值

none

动画不与时间轴关联。

auto

动画的时间轴是文档的默认`DocumentTimeline`。

scroll()

匿名滚动进度时间轴由当前元素的一些祖先滚动容器提供。函数参数允许您选择滚动容器以及将沿其测量时间轴的滚动轴。

有关更多信息，请参阅`scroll()`。

view()

匿名视图进度时间轴由设置了 `animation-timeline: view();` 的主题提供。函数参数允许您选择将沿其跟踪时间轴进度的滚动条轴，以及调整主题被视为可见的框的位置的内边距。

有关更多信息，请参阅`view()`。

<dashed-ident>

一个`<dashed-ident>`，用于标识先前使用`scroll-timeline-name` 或`view-timeline-name` 属性（或`scroll-timeline` 或`view-timeline` 简写属性）声明的命名时间轴。

注意：如果两个或多个时间轴共享相同的名称，则级联中最后声明的时间轴将被使用。此外，如果找不到与给定名称匹配的时间轴，则动画不与时间轴关联。

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

正式定义

初始值	`auto`
应用于	所有元素
继承	否
计算值	一个列表，每个项目要么是区分大小写的 CSS 标识符，要么是关键字 `none`、`auto`。
动画类型	不可动画

正式语法

animation-timeline = 
  <single-animation-timeline>#  

<single-animation-timeline> = 
  auto            |
  none            |
  <dashed-ident>  |
  <scroll()>      |
  <view()>        

<scroll()> = 
  scroll( [ <scroller> || <axis> ]? )  

<view()> = 
  view( [ <axis> || <'view-timeline-inset'> ]? )  

<scroller> = 
  root     |
  nearest  |
  self     

<axis> = 
  block   |
  inline  |
  x       |
  y       

<view-timeline-inset> = 
  [ [ auto | <length-percentage> ]{1,2} ]#  

<length-percentage> = 
  <length>      |
  <percentage>

示例

设置命名滚动进度时间轴

使用 `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 使用 `scroll-timeline-name` 属性将其设置为名为 `--squareTimeline` 的滚动进度时间轴的源（我们可以使用`scroll-timeline-axis` 显式设置要使用的滚动条轴，但这里只有一个块方向的滚动条，它将默认使用）。

容器的高度设置为 300px，并且我们还设置容器，如果它溢出则创建垂直滚动条（在下面，我们将使用“stretcher”元素上的 CSS 来确保它确实溢出）。

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-direction: alternate;
  animation-timeline: --squareTimeline;

  position: absolute;
  bottom: 0;
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

“stretcher” CSS 将块高度设置为 600px，这迫使容器元素溢出并创建滚动条。如果没有此元素，则不会有滚动条，因此也没有与动画时间轴关联的滚动进度时间轴。

css

#stretcher {
  height: 600px;
}

结果

滚动以查看正方形元素正在动画。

设置匿名滚动进度时间轴

在此示例中，`#square` 元素使用匿名滚动进度时间轴进行动画，该时间轴使用 `scroll()` 函数应用于要动画的元素。在此特定示例中，时间轴由具有（任何）滚动条的最近的父元素提供，来自块方向的滚动条。

HTML

下面的 HTML 显示了该示例。

html

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

CSS

下面的 CSS 定义了一个正方形，它根据 `animation-timeline` 属性提供的时间轴以交替方向旋转。在这种情况下，时间轴由 `scroll(block nearest)` 提供，这意味着它将选择具有滚动条的最近祖先元素的块方向的滚动条；在本例中，是“container”元素的垂直滚动条。

注意：`block` 和 `nearest` 实际上是默认参数值，因此我们只需使用 `scroll()` 即可。

css

#square {
  background-color: deeppink;
  width: 100px;
  height: 100px;
  margin-top: 100px;
  position: absolute;
  bottom: 0;

  animation-name: rotateAnimation;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
  animation-direction: alternate;
  animation-timeline: scroll(block nearest);
}

@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

容器的 CSS 将其高度设置为 300px，并且我们还设置容器，如果它溢出则创建垂直滚动条。“stretcher” CSS 将块高度设置为 600px，这迫使容器元素溢出。这两者一起确保容器具有垂直滚动条，从而允许它用作匿名滚动进度时间轴的源。

css

#container {
  height: 300px;
  overflow-y: scroll;
  position: relative;
}

#stretcher {
  height: 600px;
}

结果

滚动以查看正方形元素正在动画。

设置命名视图进度时间轴

使用 `view-timeline-name` 属性在 `class` 为 `animation` 的主题元素上定义了一个名为 `--subjectReveal` 的视图进度时间轴。然后，使用 `animation-timeline: --subjectReveal;` 将其设置为同一元素的时间轴。结果是，主题元素在向上滚动时穿过文档时会进行动画。

HTML

下面的 HTML 显示了该示例。

html

<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>

CSS

`subject` 元素及其包含的 `content` 元素的样式非常简单，文本内容具有基本字体设置

css

.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

`class` 为 `subject` 的 `

` 也具有 `animation` 类——在这里，`view-timeline-name` 设置为定义命名视图进度时间轴。它还使用相同的值给出了一个 `animation-timeline` 名称，以声明这将是随着视图进度时间轴的进行而进行动画的元素。

最后，在元素上指定了一个动画，该动画对其不透明度和缩放进行动画，使其在向上滚动时淡入并放大。

css

.animation {
  view-timeline-name: --subjectReveal;
  animation-timeline: --subjectReveal;

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

结果

滚动以查看主题元素正在动画。

设置匿名视图进度时间轴

使用 `animation-timeline: view()` 在 `class` 为 `subject` 的元素上设置了一个匿名视图进度时间轴。结果是，`subject` 元素在向上滚动时穿过文档时会进行动画。

HTML

下面的 HTML 显示了该示例。

html

<div class="content">
  <h1>Content</h1>

  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Risus quis varius quam
    quisque id. Et ligula ullamcorper malesuada proin libero nunc consequat
    interdum varius. Elit ullamcorper dignissim cras tincidunt lobortis feugiat
    vivamus at augue.
  </p>

  <p>
    Dolor sed viverra ipsum nunc aliquet. Sed sed risus pretium quam vulputate
    dignissim. Tortor aliquam nulla facilisi cras. A erat nam at lectus urna
    duis convallis convallis. Nibh ipsum consequat nisl vel pretium lectus.
    Sagittis aliquam malesuada bibendum arcu vitae elementum. Malesuada bibendum
    arcu vitae elementum curabitur vitae nunc sed velit.
  </p>

  <div class="subject animation"></div>

  <p>
    Adipiscing enim eu turpis egestas pretium aenean pharetra magna ac. Arcu
    cursus vitae congue mauris rhoncus aenean vel. Sit amet cursus sit amet
    dictum. Augue neque gravida in fermentum et. Gravida rutrum quisque non
    tellus orci ac auctor augue mauris. Risus quis varius quam quisque id diam
    vel quam elementum. Nibh praesent tristique magna sit amet purus gravida
    quis. Duis ultricies lacus sed turpis tincidunt id aliquet. In egestas erat
    imperdiet sed euismod nisi. Eget egestas purus viverra accumsan in nisl nisi
    scelerisque. Netus et malesuada fames ac.
  </p>
</div>

CSS

`subject` 元素及其包含的 `content` 元素的样式非常简单，文本内容具有基本字体设置

css

.subject {
  width: 300px;
  height: 200px;
  margin: 0 auto;
  background-color: deeppink;
}

.content {
  width: 75%;
  max-width: 800px;
  margin: 0 auto;
}

p,
h1 {
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 3rem;
}

p {
  font-size: 1.5rem;
  line-height: 1.5;
}

`class` 为 `subject` 的 `

` 也具有 `animation` 类——在这里，`animation-timeline: view()` 设置为声明它将在其滚动祖先（在本例中为文档的根元素）提供的视图进度时间轴中进行动画。

最后，在元素上指定了一个动画，该动画对其不透明度和缩放进行动画，使其在向上滚动时淡入并放大。

css

.animation {
  animation-timeline: view();

  animation-name: appear;
  animation-fill-mode: both;
  animation-duration: 1ms; /* Firefox requires this to apply the animation */
}

@keyframes appear {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

结果

滚动以查看主题元素正在动画。

规范

规范
CSS 动画级别 2 # animation-timeline

浏览器兼容性

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

另请参阅

animation、animation-composition、animation-delay、animation-direction、animation-duration、animation-fill-mode、animation-iteration-count、animation-name、animation-play-state、animation-timing-function
scroll-timeline-name、scroll-timeline-axis、scroll-timeline
timeline-scope
view-timeline-name、view-timeline-axis、view-timeline、view-timeline-inset
JavaScript 等效项：`Element.animate()` 调用中可用的 `timeline` 属性
CSS 滚动驱动的动画
使用 CSS 动画