animation-timeline

Syntax

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

Werte

none

Die Animation ist nicht mit einer Zeitleiste verknüpft.

auto

Die Zeitleiste der Animation ist die Standard-DocumentTimeline des Dokuments.

scroll()

Eine anonyme Scroll-Fortschritts-Zeitleiste wird von einem Vorfahren-Scroller des aktuellen Elements bereitgestellt. Die Funktionsparameter ermöglichen die Auswahl des Scrollers und der Scrollachse, entlang derer die Zeitleiste gemessen wird.

Siehe scroll() für weitere Informationen.

view()

Eine anonyme View-Fortschritts-Zeitleiste wird von dem Subject bereitgestellt, auf das animation-timeline: view(); gesetzt ist. Die Funktionsparameter ermöglichen die Auswahl der Scrollleistenachse, entlang der die Zeitleistenfortschritte verfolgt werden, und eines Insets, das die Position der Box anpasst, in der das Subject als sichtbar gilt.

Siehe view() für weitere Informationen.

<dashed-ident>

Ein <dashed-ident>, das eine benannte Zeitleiste identifiziert, die zuvor mit der Eigenschaft scroll-timeline-name oder view-timeline-name (oder der Kurzform-Eigenschaft scroll-timeline oder view-timeline) deklariert wurde.

Hinweis: Wenn zwei oder mehr Zeitleisten denselben Namen haben, wird die zuletzt in der Kaskade deklarierte verwendet. Wenn keine Zeitleiste gefunden wird, die dem gegebenen Namen entspricht, ist die Animation nicht mit einer Zeitleiste verknüpft.

Hinweis: Die <dashed-ident> Werte müssen mit -- beginnen. Dies hilft, Namenskonflikte mit standardmäßigen CSS-Schlüsselwörtern zu vermeiden.

Formale Definition

Formale Syntax

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>  

Beispiele

Festlegung einer benannten Scroll-Fortschritts-Zeitleiste

Eine Scroll-Fortschritts-Zeitleiste mit dem Namen --square-timeline wird unter Verwendung der Eigenschaft scroll-timeline-name auf einem Element mit der ID container definiert. Dies wird dann als Zeitleiste für die Animation auf dem #square Element mit animation-timeline: --square-timeline festgelegt.

HTML

Das HTML für das Beispiel wird unten gezeigt.

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

CSS

Das CSS für den Container setzt ihn als Quelle einer Scroll-Fortschritts-Zeitleiste mit dem Namen --square-timeline mithilfe der Eigenschaft scroll-timeline-name (wir könnten explizit festlegen, welche Scrollbarenachse mit scroll-timeline-axis verwendet werden soll, aber es gibt hier nur eine Blockrichtungs-Scrollleiste, und diese wird standardmäßig verwendet).

Die Höhe des Containers ist auf 300px eingestellt und wir setzen auch den Container so, dass er eine vertikale Scrollleiste erstellt, wenn er überläuft (unten verwenden wir CSS beim "Stretcher"-Element, um sicherzustellen, dass es überläuft).

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

Das untenstehende CSS definiert ein Quadrat, das sich in entgegengesetzte Richtungen dreht, entsprechend der Zeitleiste, die durch die animation-timeline Eigenschaft bereitgestellt wird, die auf die oben genannte --square-timeline Zeitleiste gesetzt ist.

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

Das "Stretcher"-CSS setzt die Blockhöhe auf 600px, was das Container-Element zwingt, zu überlaufen und Scrollleisten zu erstellen. Ohne dieses Element gäbe es keine Scrollleiste und daher keine Scroll-Fortschritts-Zeitleiste, die mit der Animationszeitleiste verknüpft wäre.

#stretcher {
  height: 600px;
}

Ergebnis

Scrollen Sie, um zu sehen, wie das Quadrat-Element animiert wird.

Festlegung einer anonymen Scroll-Fortschritts-Zeitleiste

In diesem Beispiel wird das #square Element mit einer anonymen Scroll-Fortschritts-Zeitleiste animiert, die auf das zu animierende Element mit der Funktion scroll() angewendet wird. Die Zeitleiste in diesem speziellen Beispiel wird vom nächsten übergeordneten Element bereitgestellt, das eine (beliebige) Scrollleiste hat, von der Scrollleiste in der Blockrichtung.

HTML

Das HTML für das Beispiel wird unten gezeigt.

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

CSS

Das untenstehende CSS definiert ein Quadrat, das sich in entgegengesetzte Richtungen dreht, entsprechend der Zeitleiste, die durch die animation-timeline Eigenschaft bereitgestellt wird. In diesem Fall wird die Zeitleiste durch scroll(block nearest) bereitgestellt, was bedeutet, dass sie die Scrollleiste in der Blockrichtung des nächsten Vorfahren-Elements auswählt, das Scrollleisten hat; in diesem Fall die vertikale Scrollleiste des "Container"-Elements.

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

Das CSS für den Container setzt seine Höhe auf 300px und wir setzen auch den Container so, dass er eine vertikale Scrollleiste erstellt, wenn er überläuft. Das "Stretcher"-CSS setzt die Blockhöhe auf 600px, was das Container-Element zwingt, zu überlaufen. Diese beiden zusammen stellen sicher, dass der Container eine vertikale Scrollleiste hat, die es ermöglicht, als Quelle der anonymen Scroll-Fortschritts-Zeitleiste verwendet zu werden.

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

#stretcher {
  height: 600px;
}

Ergebnis

Scrollen Sie, um zu sehen, wie das Quadrat-Element animiert wird.

Festlegung einer benannten View-Fortschritts-Zeitleiste

Eine View-Fortschritts-Zeitleiste mit dem Namen --subject-reveal wird unter Verwendung der Eigenschaft view-timeline-name auf einem Subject-Element mit der Klasse animation definiert. Dies wird dann als Zeitleiste für dasselbe Element mit animation-timeline: --subject-reveal; festgelegt. Das Ergebnis ist, dass das Subject-Element animiert wird, während es aufwärts durch das Dokument bewegt wird, wenn es gescrollt wird.

HTML

Das HTML für das Beispiel wird unten gezeigt.

<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

Das subject Element und sein enthaltenes content Element sind minimal gestaltet, und der Textinhalt erhält einige grundlegende Schriftarteinstellungen:

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

Das <div> mit der Klasse subject erhält auch die Klasse animation — hier wird die view-timeline-name festgelegt, um eine benannte View-Fortschritts-Zeitleiste zu definieren. Es erhält auch einen animation-timeline Namen mit demselben Wert, um zu erklären, dass dies das Element ist, das animiert wird, wenn die View-Fortschritts-Zeitleiste fortschreitet.

Zuletzt wird eine Animation auf dem Element spezifiziert, die seine Opazität und Größe animiert und dazu führt, dass es einblendet und sich vergrößert, während es den Scroller hinaufbewegt.

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

Ergebnis

Scrollen Sie, um zu sehen, wie das Subject-Element animiert wird.

Festlegung einer anonymen View-Fortschritts-Zeitleiste

Eine anonyme View-Fortschritts-Zeitleiste wird auf einem Element mit der Klasse subject gesetzt, indem animation-timeline: view() verwendet wird. Das Ergebnis ist, dass das subject Element animiert wird, während es aufwärts durch das Dokument bewegt wird, wenn es gescrollt wird.

HTML

Das HTML für das Beispiel wird unten gezeigt.

<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

Das subject Element und sein enthaltenes content Element sind minimal gestaltet, und der Textinhalt erhält einige grundlegende Schriftarteinstellungen:

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

Das <div> mit der Klasse subject erhält auch die Klasse animation — hier wird animation-timeline: view() gesetzt, um zu erklären, dass es animiert wird, wenn es durch die View-Fortschritts-Zeitleiste fortschreitet, die von seinem scrollenden Vorfahren bereitgestellt wird (in diesem Fall das Stamm-Element des Dokuments).

Zuletzt wird eine Animation auf dem Element spezifiziert, die seine Opazität und Größe animiert und dazu führt, dass es einblendet und sich vergrößert, während es den Scroller hinaufbewegt.

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

Ergebnis

Scrollen Sie, um zu sehen, wie das Subject-Element animiert wird.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• 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
• Das JavaScript-Äquivalent: Die timeline Eigenschaft, die in Element.animate() Aufrufen verfügbar ist
• CSS scroll-gesteuerte Animationen
• Verwendung von CSS-Animationen