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 keiner Timeline zugeordnet.

auto

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

scroll()

Eine anonyme Scroll-Fortschritts-Timeline wird von einem Ahnen-Scroller des aktuellen Elements bereitgestellt. Die Funktionsparameter erlauben es Ihnen, den Scroller auszuwählen, und die Scrollachse, entlang der die Timeline gemessen wird.

Siehe scroll() für mehr Informationen.

view()

Eine anonyme View-Fortschritts-Timeline wird vom Subjekt bereitgestellt, auf dem animation-timeline: view(); gesetzt ist. Die Funktionsparameter erlauben es Ihnen, die Scrollbalkenachse auszuwählen, entlang der die Fortschritte der Timeline verfolgt werden, und einen Rand, der die Position des Kastens anpasst, in dem das Subjekt als sichtbar erachtet wird.

Siehe view() für mehr Informationen.

<dashed-ident>

Ein <dashed-ident> identifiziert eine zuvor mit der scroll-timeline-name oder view-timeline-name Eigenschaft (oder der scroll-timeline oder view-timeline Kurzschreib-Eigenschaft) deklarierte benannte Timeline.

Hinweis: Wenn zwei oder mehr Timelines denselben Namen teilen, wird die zuletzt innerhalb der Cascade deklarierte verwendet. Außerdem, wenn keine Timeline gefunden wird, die dem angegebenen Namen entspricht, ist die Animation keiner Timeline zugeordnet.

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

Festlegen einer benannten Scroll-Fortschritts-Timeline

Eine Scroll-Fortschritts-Timeline mit dem Namen --square-timeline wird mit der Eigenschaft scroll-timeline-name auf einem Element mit einer id von container definiert. Diese wird dann als Timeline für die Animation auf dem #square-Element festgelegt, indem animation-timeline: --square-timeline verwendet wird.

HTML

Der HTML-Code für das Beispiel wird unten gezeigt.

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

CSS

Der CSS-Code für den Container legt ihn als Quelle einer Scroll-Fortschritts-Timeline mit dem Namen --square-timeline unter Verwendung der Eigenschaft scroll-timeline-name fest (wir könnten explizit einstellen, welche Scrollbalkenachse mit scroll-timeline-axis verwendet werden soll, aber hier gibt es nur einen Block-Richtungs-Scrollbalken, und er wird standardmäßig verwendet).

Die Höhe des Containers wird auf 300px festgelegt und wir setzen den Container auch so, dass er einen vertikalen Scrollbalken erstellt, wenn er überläuft (unten werden wir CSS auf das "Stretcher"-Element anwenden, um sicherzustellen, dass es überläuft).

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

Der untenstehende CSS-Code definiert ein Quadrat, das sich in wechselnden Richtungen dreht entsprechend der Timeline, die durch die Eigenschaft animation-timeline vorgegeben wird, welche auf die oben benannte Timeline --square-timeline eingestellt 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 Containerelement zum Überlaufen zwingt und damit Scrollbalken erzeugt. Ohne dieses Element gäbe es keinen Scrollbalken und folglich keine Scroll-Fortschritts-Timeline, die mit der Animation-Timeline verbunden werden könnte.

#stretcher {
  height: 600px;
}

Ergebnis

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

Festlegen einer anonymen Scroll-Fortschritts-Timeline

In diesem Beispiel wird das #square-Element mit einer anonymen Scroll-Fortschritts-Timeline animiert, die auf das zu animierende Element mit der scroll() Funktion angewendet wird. Die Timeline in diesem speziellen Beispiel wird vom nächstgelegenen Elternelement bereitgestellt, das (irgendwelche) Scrollbalken hat, aus dem Scrollbalken in Blockrichtung.

HTML

Der HTML-Code für das Beispiel wird unten gezeigt.

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

CSS

Der untenstehende CSS-Code definiert ein Quadrat, das sich in wechselnden Richtungen dreht entsprechend der Timeline, die durch die Eigenschaft animation-timeline vorgegeben wird. In diesem Fall wird die Timeline durch scroll(block nearest) bereitgestellt, was bedeutet, dass sie den Scrollbalken in der Blockrichtung des nächstgelegenen Vorfahr-Elements auswählen wird, das Scrollbalken hat; 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 den Container auch so, dass er einen vertikalen Scrollbalken erstellt, wenn er überläuft. Das "Stretcher"-CSS setzt die Blockhöhe auf 600px, was das Containerelement zum Überlaufen zwingt. Diese beiden zusammenstellen sicher, dass der Container einen vertikalen Scrollbalken hat, was es erlaubt, ihn als Quelle der anonymen Scroll-Fortschritts-Timeline zu verwenden.

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

#stretcher {
  height: 600px;
}

Ergebnis

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

Festlegen einer benannten View-Fortschritts-Timeline

Eine View-Fortschritts-Timeline mit dem Namen --subject-reveal wird mit der view-timeline-name Eigenschaft auf einem Subjektelement mit einer class von animation definiert. Diese wird dann als die Timeline für dasselbe Element mit animation-timeline: --subject-reveal; festgelegt. Das Ergebnis ist, dass das Subjektelement animiert wird, während es nach oben durch das Dokument bewegt wird, während es gescrollt wird.

HTML

Der HTML-Code 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 werden minimal gestylt und der Textinhalt erhält einige grundlegende Schrift-Einstellungen:

.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 außerdem eine Klasse animation — hier wird die view-timeline-name eingestellt, um eine benannte View-Fortschritts-Timeline zu definieren. Es erhält auch einen animation-timeline Namen mit demselben Wert, um zu erklären, dass dies das zu animierende Element ist, während die View-Fortschritts-Timeline fortschreitet.

Zuletzt wird auf dem Element eine Animation spezifiziert, die dessen Opazität und Maßstab animiert, sodass es einfadet und sich vergrößert, während es den Scroller hinauf bewegt wird.

.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 das Subjekt-Element animiert zu sehen.

Festlegen einer anonymen View-Fortschritts-Timeline

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

HTML

Der HTML-Code 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 werden minimal gestylt und der Textinhalt erhält einige grundlegende Schrift-Einstellungen:

.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 außerdem eine Klasse animation — hier wird animation-timeline: view() eingestellt, um zu deklarieren, dass es animiert wird, während es durch die View-Fortschritts-Timeline fortschreitet, die von seinem scrollbaren Vorfahren bereitgestellt wird (in diesem Fall das Root-Element des Dokuments).

Zuletzt wird auf dem Element eine Animation spezifiziert, die dessen Opazität und Maßstab animiert, sodass es einfadet und sich vergrößert, während es den Scroller hinauf bewegt wird.

.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 das Subjekt-Element animiert zu sehen.

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
• Der JavaScript-Äquivalent: Die timeline Eigenschaft verfügbar in Element.animate() Aufrufen
• CSS scrollgesteuerte Animationen
• Verwendung von CSS-Animationen