animation-timeline

none

Die Animation ist nicht mit einer Zeitleiste verknüpft.

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 erlauben es Ihnen, den Scroller und die Scroll-Achse auszuwählen, entlang derer die Zeitleiste gemessen wird.

Siehe scroll() für weitere Informationen.

view()

Eine anonyme Ansichts-Fortschritts-Zeitleiste wird von dem Subjekt bereitgestellt, auf dem animation-timeline: view(); gesetzt ist. Die Funktionsparameter erlauben es Ihnen, die Scrollbalkenachse auszuwählen, entlang derer der Fortschritt der Zeitleiste verfolgt wird, und einen Versatz, der die Position der Box anpasst, in der das Subjekt als sichtbar gilt.

Siehe view() für weitere Informationen.

<dashed-ident>

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

Hinweis: Wenn zwei oder mehr Zeitleisten denselben Namen teilen, wird die zuletzt deklarierte innerhalb der Reihenfolge verwendet. Außerdem, 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.

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 Scroll-Fortschritts-Zeitleiste mit dem Namen --squareTimeline wird mit der scroll-timeline-name-Eigenschaft auf einem Element mit der id container definiert. Diese wird dann als Zeitleiste für die Animation auf dem #square Element mit animation-timeline: --squareTimeline gesetzt.

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 legt fest, dass er die Quelle einer Scroll-Fortschritts-Zeitleiste mit dem Namen --squareTimeline ist, indem die scroll-timeline-name-Eigenschaft verwendet wird (wir könnten explizit festlegen, welche Scrollbalkenachse mit scroll-timeline-axis verwendet werden soll, aber hier gibt es nur einen Scrollbalken in Blockrichtung, und dieser wird standardmäßig verwendet).

Die Höhe des Containers wird auf 300px gesetzt und wir legen auch fest, dass der Container einen vertikalen Scrollbalken erzeugt, wenn 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: --squareTimeline;
  position: relative;
}

Das untenstehende CSS definiert ein Quadrat, das sich entsprechend der Zeitleiste, die von der animation-timeline-Eigenschaft bereitgestellt wird, in abwechselnden Richtungen dreht, welche 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 Überlaufen des Containerelements erzwingt und Scrollbalken erzeugt. Ohne dieses Element gäbe es keine Scrollbalken und daher keine Scroll-Fortschritts-Zeitleiste, die mit der Animations-Zeitleiste verknüpft werden könnte.

#stretcher {
  height: 600px;
}

Ergebnis

Scrollen Sie, um das animierte Quadrat zu sehen.

In diesem Beispiel wird das #square Element mit einer anonymen Scroll-Fortschritts-Zeitleiste animiert, die auf das zu animierende Element durch die scroll()-Funktion angewendet wird. In diesem speziellen Beispiel wird die Zeitleiste vom nächstgelegenen Elternelement bereitgestellt, das irgendeinen Scrollbalken hat, und zwar vom Scrollbalken in 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 gemäß der von der animation-timeline-Eigenschaft bereitgestellten Zeitleiste in abwechselnden Richtungen dreht. In diesem Fall wird die Zeitleiste von scroll(block nearest) bereitgestellt, was bedeutet, dass es den Scrollbalken in Blockrichtung des nächsten Vorfahrenelements auswählt, das Scrollbalken hat; in diesem Fall den vertikalen Scrollbalken des "container"-Elements.

Note: block und nearest sind tatsächlich die Standardparameterwerte, sodass wir einfach scroll() verwenden könnten.

#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 legen auch fest, dass der Container einen vertikalen Scrollbalken erzeugt, wenn er überläuft. Das "Stretcher"-CSS setzt die Blockhöhe auf 600px, was das Überlaufen des Containerelements erzwingt. Diese beiden zusammen gewährleisten, dass der Container einen vertikalen Scrollbalken hat, wodurch er als Quelle der anonymen Scroll-Fortschritts-Zeitleiste verwendet werden kann.

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

#stretcher {
  height: 600px;
}

Ergebnis

Scrollen Sie, um das animierte Quadrat zu sehen.

Eine Ansichts-Fortschritts-Zeitleiste mit dem Namen --subjectReveal wird mithilfe der view-timeline-name-Eigenschaft auf einem Subjektelement mit einer class von animation definiert. Diese wird dann als Zeitleiste für dasselbe Element mit animation-timeline: --subjectReveal; gesetzt. Das Ergebnis ist, dass das Subjektelement animiert wird, wenn es beim Scrollen nach oben durch das Dokument bewegt 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 gestylt, und der Textinhalt erhält einige grundlegende Schrifteinstellungen:

.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 erhält ebenfalls eine Klasse animation — hier wird die view-timeline-name festgelegt, um eine benannte Ansichts-Fortschritts-Zeitleiste zu definieren. Es wird auch ein animation-timeline-Name mit demselben Wert angegeben, um zu erklären, dass dies das zu animierende Element ist, während die Ansichts-Fortschritts-Zeitleiste fortschreitet.

Schließlich wird eine Animation für das Element spezifiziert, die seine Deckkraft und Größe animiert und es beim Hochscrollen des Scrollers verblassen und vergrößern lässt.

.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 Subjektelement zu sehen.

Eine anonyme Ansichts-Fortschritts-Zeitleiste wird auf ein Element mit der Klasse subject gesetzt, indem animation-timeline: view() verwendet wird. Das Ergebnis ist, dass das subject Element animiert wird, während es beim Scrollen nach oben durch das Dokument bewegt 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 gestylt, und der Textinhalt erhält einige grundlegende Schrifteinstellungen:

.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 erhält ebenfalls 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 Ansichts-Fortschritts-Zeitleiste läuft (in diesem Fall das Wurzelelement des Dokuments).

Schließlich wird eine Animation für das Element spezifiziert, die seine Deckkraft und Größe animiert und es beim Hochscrollen des Scrollers verblassen und vergrößern lässt.

.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 Subjektelement 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, die in Element.animate()-Aufrufen verfügbar ist
• CSS scroll-gesteuerte Animationen
• Verwendung von CSS-Animationen