1. Web
  2. CSS
  3. animation-timeline

animation-timeline

可用性有限

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

animation-timeline 这个 CSS 属性指定了用于控制 CSS 动画进度的动画时间轴。

可以通过 animation-timeline 设置以下类型的时间轴：

  • 默认的文档时间轴，该时间轴的进度由文档在浏览器中首次加载后的时间流逝来驱动。这是传统上与 CSS 动画相关联的时间轴，通过将值设置为 auto 或完全不指定 animation-timeline 值来选择。
  • 滚动进度时间轴，该时间轴的进度由可滚动元素（scroller）从上到下（或从左到右）滚动来驱动。滚动范围内的位置被转换为进度百分比——开始时为 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: --progress-bar-timeline, --carousel-timeline;
animation-timeline: none, --sliding-timeline;

/* 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>

示例

设置命名滚动进度时间轴

在 id 为 container 的元素上，使用 scroll-timeline-name 属性定义一个名为 --square-timeline 的滚动进度时间轴。然后，通过 animation-timeline: --square-timeline 将其设置为 #square 元素上动画的时间轴。

HTML

示例的 HTML 如下所示。

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

CSS

容器的 CSS 使用 scroll-timeline-name 属性将其设置为名为 --square-timeline 的滚动进度时间轴的来源（我们可以使用 scroll-timeline-axis 明确设置要使用的滚动条轴，但这里只有一个块方向的滚动条，并且它将默认被使用）。

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

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

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

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: --square-timeline;

  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;
}

结果

滚动以查看正方形元素的动画效果。

设置命名视图进度时间轴

在 class 为 animation 的主体元素上，使用 view-timeline-name 属性定义一个名为 --subject-reveal 的视图进度时间轴。然后，使用 animation-timeline: --subject-reveal; 将其设置为同一元素的时间轴。结果是，当主体元素在文档中向上滚动时，它会播放动画。

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: "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 3rem;
}

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

class 为 subject 的 <div> 也被赋予了 animation 类——在这里设置 view-timeline-name 来定义一个命名视图进度时间轴。它也被赋予了相同值的 animation-timeline 名称，以声明当视图进度时间轴推进时，这个元素将是播放动画的元素。

最后，在元素上指定了一个动画，该动画使其不透明度和缩放发生变化，从而在它向上移动滚动条时淡入并变大。

css
.animation {
  view-timeline-name: --subject-reveal;
  animation-timeline: --subject-reveal;

  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);
  }
}

结果

滚动以查看主体元素的动画效果。

设置匿名视图进度时间轴

在 class 为 subject 的元素上，使用 animation-timeline: view() 设置了一个匿名视图进度时间轴。结果是，当 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: "Helvetica", "Arial", sans-serif;
}

h1 {
  font-size: 3rem;
}

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

class 为 subject 的 <div> 也被赋予了 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 Animations Level 2
# animation-timeline

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

此页面的最后修改时间是 ，由 MDN 贡献者修改。

在 GitHub 上查看此页面 • 报告此内容的问题
© . Content available under a Creative Commons license.