animation-timeline

none

Die Animation ist keiner Zeitleiste zugeordnet.

auto

Die Zeitleiste der Animation ist die standardmäßige DocumentTimeline des Dokuments.

scroll()

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

Siehe scroll() für weitere Informationen.

view()

Eine anonyme Ansichtsfortschritts-Zeitleiste wird von dem Subjekt bereitgestellt, auf dem animation-timeline: view(); gesetzt ist. Die Funktionsparameter ermöglichen es, die Scrollleisten-Achse auszuwählen, entlang der der Zeitleistenfortschritt verfolgt wird, und einen Versatz, der die Position der Box anpasst, in der das Subjekt sichtbar ist.

Siehe view() für weitere Informationen.

<dashed-ident>

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

Hinweis: Wenn zwei oder mehr Zeitleisten denselben Namen teilen, wird die zuletzt innerhalb der Cascade deklarierte verwendet. Auch, wenn keine Zeitleiste gefunden wird, die zum angegebenen Namen passt, ist die Animation keiner Zeitleiste zugeordnet.

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

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>  

Eine mit --squareTimeline benannte Scroll-Fortschritts-Zeitleiste wird mithilfe der scroll-timeline-name Eigenschaft auf einem Element mit einer id von container definiert. Diese wird dann als Zeitleiste für die Animation des #square Elements mit animation-timeline: --squareTimeline festgelegt.

HTML

Der HTML-Code für das Beispiel ist 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, die mit --squareTimeline benannt ist, mit der scroll-timeline-name Eigenschaft (wir könnten explizit festlegen, welche Scrollleisten-Achse mit scroll-timeline-axis verwendet werden soll, aber es gibt hier nur eine Block-Richtung Scrollleiste, und diese wird standardmäßig verwendet).

Die Höhe des Containers wird auf 300px gesetzt und wir setzen den Container auch, um eine vertikale Scrollleiste zu erstellen, wenn er überläuft (unten werden wir CSS auf das "Stretcher"-Element anwenden, um sicherzustellen, dass er tatsächlich überläuft).

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

Das untenstehende CSS definiert ein Quadrat, das sich gemäß der durch animation-timeline bereitgestellten Zeitleiste in wechselnder Richtung dreht, die auf die oben genannte --squareTimeline 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: --squareTimeline;

  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 Element erzwingt, um überzulaufen und Scrollleisten zu erstellen. Ohne dieses Element gäbe es keine Scrollleiste und daher keine Scroll-Fortschritts-Zeitleiste, die mit der Animation-Zeitleiste verknüpft werden könnte.

#stretcher {
  height: 600px;
}

Ergebnis

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

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

HTML

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

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

CSS

Das untenstehende CSS definiert ein Quadrat, das sich gemäß der durch animation-timeline bereitgestellten Zeitleiste in wechselnder Richtung dreht. In diesem Fall wird die Zeitleiste durch scroll(block nearest) bereitgestellt, was bedeutet, dass sie die Scrollleiste in der Blockrichtung des nächstgelegenen 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 den Container auch, um eine vertikale Scrollleiste zu erstellen, wenn er überläuft. Das "Stretcher"-CSS setzt die Blockhöhe auf 600px, was das Element erzwingt, um überzulaufen. Diese beiden Elemente zusammen stellen sicher, dass der Container eine vertikale Scrollleiste hat, die es ermöglicht, sie als Quelle der anonymen Scroll-Fortschritts-Zeitleiste zu verwenden.

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

#stretcher {
  height: 600px;
}

Ergebnis

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

Eine Ansichtsfortschritts-Zeitleiste, die --subjectReveal genannt wird, wird mithilfe der view-timeline-name Eigenschaft auf einem Subjekt-Element mit einer class von animation definiert. Diese wird dann als Zeitleiste für dasselbe Element festgelegt mit animation-timeline: --subjectReveal;. Das Ergebnis ist, dass das Subjekt-Element animiert wird, während es beim Scrollen durch das Dokument nach oben bewegt wird.

HTML

Der HTML-Code für das Beispiel ist 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 enthaltendes content Element sind minimal gestylt, und der Textinhalt hat einige grundlegende Schriftart-Einstellungen erhalten:

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

Das <div> mit der Klasse subject hat auch die Klasse animation — hier wird view-timeline-name gesetzt, um eine benannte Ansichtsfortschritts-Zeitleiste zu definieren. Es wird auch ein animation-timeline Name mit demselben Wert gegeben, um zu erklären, dass dies das Element ist, welches animiert wird, während die Ansichtsfortschritts-Zeitleiste fortschreitet.

Zuletzt wird eine Animation auf dem Element spezifiziert, die dessen Deckkraft und Maßstab animiert, was es bewirkt, dass es ausblendet und vergrößert, während es den Scroller hinauf bewegt.

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

Ergebnis

Scrollen Sie, um das animierte Subjekt-Element zu sehen.

Eine anonyme Ansichtsfortschritts-Zeitleiste wird auf einem Element mit der Klasse subject mit animation-timeline: view() gesetzt. Das Ergebnis ist, dass das subject Element animiert wird, während es beim Scrollen durch das Dokument nach oben bewegt wird.

HTML

Der HTML-Code für das Beispiel ist 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 enthaltendes content Element sind minimal gestylt, und der Textinhalt hat einige grundlegende Schriftart-Einstellungen erhalten:

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

Das <div> mit der Klasse subject hat auch die Klasse animation — hier wird animation-timeline: view() gesetzt, um zu erklären, dass es anhand der Ansichtsfortschritts-Zeitleiste animiert wird, die von seinem scrollenden Vorfahren bereitgestellt wird (in diesem Fall das Wurzelelement des Dokuments).

Zuletzt wird eine Animation auf dem Element spezifiziert, die dessen Deckkraft und Maßstab animiert, was es bewirkt, dass es ausblendet und vergrößert, während es den Scroller hinauf 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 das animierte Subjekt-Element zu sehen.

• 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-Scroll-gesteuerte Animationen
• Verwendung von CSS-Animationen