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 verbunden.

auto

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

scroll()

Eine anonyme Scroll-Fortschrittszeitleiste wird von einem Vorfahren-Scroller des aktuellen Elements bereitgestellt. Die Funktionsparameter ermöglichen Ihnen, den Scroller und die Scrollachse auszuwählen, entlang derer die Zeitleiste gemessen wird.

Weitere Informationen finden Sie unter scroll().

view()

Eine anonyme Ansichtsfortschrittszeitleiste wird von dem Subjekt bereitgestellt, auf dem animation-timeline: view(); gesetzt ist. Die Funktionsparameter ermöglichen Ihnen, die Scrollbalkenachse auszuwählen, entlang derer der Zeitleistenfortschritt verfolgt wird, sowie einen Einsatz, der die Position des Kastens anpasst, in dem das Subjekt als sichtbar gilt.

Weitere Informationen finden Sie unter view().

<dashed-ident>

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

Hinweis: Wenn zwei oder mehr Zeitleisten denselben Namen teilen, wird die zuletzt im Kaskadenstil deklarierte verwendet. Außerdem wird, wenn keine Zeitleiste gefunden wird, die dem angegebenen Namen entspricht, die Animation nicht mit einer Zeitleiste verbunden.

Hinweis: Die <dashed-ident> Werte müssen mit -- beginnen. Dies hilft, Kollisionen mit Standard-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

Setzen einer benannten Scroll-Fortschrittszeitleiste

Eine Scroll-Fortschrittszeitleiste mit dem Namen --square-timeline wird unter Verwendung der Eigenschaft scroll-timeline-name auf einem Element mit einer id von container definiert. Diese wird dann als Zeitleiste für die Animation des #square Elements mit animation-timeline: --square-timeline gesetzt.

HTML

Das HTML für das Beispiel ist unten dargestellt.

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

CSS

Der CSS-Code für das Container-Element legt es als Quelle einer Scroll-Fortschrittszeitleiste mit dem Namen --square-timeline unter Verwendung der Eigenschaft scroll-timeline-name fest (wir könnten explizit festlegen, welche Scrollbalkenachse mit scroll-timeline-axis verwendet werden soll, aber es gibt hier nur eine Scrollbalkenachse in Blockrichtung und diese wird standardmäßig verwendet).

Die Höhe des Containers wird auf 300px festgelegt und wir setzen auch den Container, um einen vertikalen Scrollbalken zu erstellen, falls er überläuft (unten verwenden wir CSS auf dem "Stretcher"-Element, um sicherzustellen, dass er überläuft).

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

Der folgende CSS-Code definiert ein Quadrat, das sich in entgegengesetzte Richtungen dreht, entsprechend der von der animation-timeline Eigenschaft bereitgestellten Zeitleiste, die auf die oben benannte --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);
  }
}

Der "Stretcher"-CSS setzt die Blockhöhe auf 600px, was das Containerelement zwingt, überzulaufen und Scrollleisten zu erstellen. Ohne dieses Element gäbe es keinen Scrollbalken und folglich keine Scroll-Fortschrittszeitleiste, die mit der Animationszeitleiste verbunden werden könnte.

#stretcher {
  height: 600px;
}

Ergebnis

Scrollen Sie, um zu sehen, wie das Quadratelement animiert wird.

Setzen einer anonymen Scroll-Fortschrittszeitleiste

In diesem Beispiel wird das #square Element mit einer anonymen Scroll-Fortschrittszeitleiste animiert, die auf das zu animierende Element unter Verwendung der scroll() Funktion angewendet wird. Die Zeitleiste in diesem speziellen Beispiel wird von dem nächstgelegenen übergeordneten Element bereitgestellt, das (irgendeinen) Scrollbalken hat, und zwar vom Scrollbalken in Blockrichtung.

HTML

Das HTML für das Beispiel ist unten dargestellt.

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

CSS

Der untenstehende CSS-Code definiert ein Quadrat, das sich in entgegengesetzte Richtungen dreht, entsprechend der von der animation-timeline Eigenschaft bereitgestellten Zeitleiste. In diesem Fall wird die Zeitleiste von scroll(block nearest) bereitgestellt, was bedeutet, dass der Scrollbalken in Blockrichtung des nächsten Vorfahrenelements mit Scrollleisten ausgewählt wird; in diesem Fall der vertikale Scrollbalken 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);
  }
}

Der CSS-Code für den Container setzt seine Höhe auf 300px und wir setzen auch den Container, um einen vertikalen Scrollbalken zu erstellen, falls er überläuft. Der "Stretcher"-CSS setzt die Blockhöhe auf 600px, was das Containerelement zwingt, überzulaufen. Diese beiden zusammen sorgen dafür, dass der Container einen vertikalen Scrollbalken hat, was es ermöglicht, ihn als Quelle der anonymen Scroll-Fortschrittszeitleiste zu verwenden.

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

#stretcher {
  height: 600px;
}

Ergebnis

Scrollen Sie, um zu sehen, wie das Quadratelement animiert wird.

Setzen einer benannten Ansichtsfortschrittszeitleiste

Eine Ansichtsfortschrittszeitleiste mit dem Namen --subject-reveal wird unter Verwendung der Eigenschaft view-timeline-name auf einem Subjektelement mit einer class von animation definiert. Diese wird dann als Zeitleiste für das gleiche Element mit animation-timeline: --subject-reveal; gesetzt. Das Ergebnis ist, dass das Subjektelement animiert wird, wenn es sich nach oben durch das Dokument bewegt, während es gescrollt wird.

HTML

Das HTML für das Beispiel ist unten dargestellt.

<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 werden minimal gestylt, und der Textinhalt erhält einige grundlegende Schriftarteneinstellungen:

.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 eine Klasse animation — hier wird view-timeline-name gesetzt, um eine benannte Ansichtsfortschrittszeitleiste zu definieren. Es wird auch ein animation-timeline Name mit dem gleichen Wert hinzugefügt, um zu erklären, dass dies das Element ist, das animiert wird, während die Ansichtsfortschrittszeitleiste fortschreitet.

Schließlich wird eine Animation auf dem Element spezifiziert, die seine Deckkraft und Skalierung animiert, wodurch es verblasst und vergrößert wird, während es sich nach oben durch den Scroller bewegt.

.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 Subjektelement animiert wird.

Setzen einer anonymen Ansichtsfortschrittszeitleiste

Eine anonyme Ansichtsfortschrittszeitleiste wird auf einem Element mit der Klasse subject unter Verwendung von animation-timeline: view() gesetzt. Das Ergebnis ist, dass das subject Element animiert wird, während es sich nach oben durch das Dokument bewegt, während es gescrollt wird.

HTML

Das HTML für das Beispiel ist unten dargestellt.

<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 werden minimal gestylt, und der Textinhalt erhält einige grundlegende Schriftarteneinstellungen:

.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 eine Klasse animation — hier wird animation-timeline: view() gesetzt, um zu erklären, dass es animiert wird, während es durch die von seinem scrollenden Vorfahren bereitgestellte Ansichtsfortschrittszeitleiste fortschreitet (in diesem Fall das Wurzelelement des Dokuments).

Zuletzt wird eine Animation auf dem Element spezifiziert, die seine Deckkraft und Skalierung animiert, wodurch es verblasst und vergrößert wird, während es sich nach oben durch den Scroller bewegt.

.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 Subjektelement 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 verfügbar in Element.animate() Aufrufen
• CSS-scrollgesteuerte Animationen
• Verwenden von CSS-Animationen