Dieanimation-timelineCSS Eigenschaft legt die Zeitleiste fest, die den Fortschritt einer CSS-Animation steuert.

Syntax

/* Keyword */animation-timeline: none;animation-timeline: auto;/* Named timeline */animation-timeline: --timeline_name;/* Anonymous scroll progress timeline */animation-timeline: scroll();animation-timeline: scroll(x root);/* Anonymous view progress timeline */animation-timeline: view();animation-timeline: view(inline);animation-timeline: view(x 200px auto);/* Multiple values */animation-timeline: --progress-bar-timeline, --carousel-timeline;animation-timeline: auto, view(20% 80%), none, scroll(inline nearest);/* Global values */animation-timeline: inherit;animation-timeline: initial;animation-timeline: revert;animation-timeline: revert-layer;animation-timeline: unset;

Werte

Dieanimation-timeline Eigenschaft wird als ein oder mehrere Werte angegeben, die durch Kommas getrennt sind, wobei jeder Wert einer der folgenden sein kann:

none

Die Animation ist nicht mit einer Zeitleiste verbunden und es findet keine Animation statt.

auto

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

scroll()

Definiert das Wurzelelement, den nächstgelegenen Scroller oder sich selbst als anonyme Scroll-Fortschrittszeitleiste und optional die Scrolldirection des Scrollers.

view()

Definiert das nächstgelegene übergeordnete Scroll-Container als anonyme Sichtfortschrittszeitleiste, die standardmäßig diebaseline Achsrichtung und dieauto Start- und Endeinzüge überschreiben kann.

<dashed-ident>

Der Name einer scrollgetriebenen oder sichtfortschritts Zeitleiste, wie sie vom Scroll-Container mit der Eigenschaftscroll-timeline-name oderview-timeline-name (oder der Abkürzungscroll-timeline oderview-timeline) definiert wird.

Beschreibung

Die Standardzeitleiste für eine CSS-Keyframe-Animation ist die zeitbasierteDocumentTimeline. Dieanimation-timeline Eigenschaft kann verwendet werden, um eine benannte oder anonyme Scroll-Fortschritts- oder Sichtfortschrittszeitleiste festzulegen. Alternativ kann sie verwendet werden, um explizit die standardmäßige zeitbasierte Dokumentzeitleiste festzulegen, um den Fortschritt der Animation eines Elements zu steuern oder um überhaupt keine Zeitleiste zu haben, in welchem Fall das Element nicht animiert wird.

Die folgenden Arten von Zeitleisten können überanimation-timeline eingestellt werden:

DocumentTimeline

Die standardmäßige Dokumentzeitleiste, die durch das Vergehen der Zeit seit dem ersten Laden des Dokuments im Browser fortschreitet. Dies ist die Zeitleiste, die traditionell mit CSS-Animationen assoziiert wird und mit einem Wert vonauto ausgewählt wird oder indem keinanimation-timeline Wert angegeben wird, da dies der Standardwert ist.

Scroll-Fortschrittszeitleiste

Die Animation wird durch das horizontale oder vertikale Scrollen eines scrollbaren Elements oder Scrollers fortschreitend. Das Element, das die Scroll-Fortschrittszeitleiste bereitstellt, kann auf zwei Arten angegeben werden:

Benannte Scroll-Fortschrittszeitleiste

Der Scroller wird explizit benannt, indem die Eigenschaftscroll-timeline-name (oder die Abkürzungscroll-timeline) auf ein<dashed-ident> gesetzt wird; dieser<dashed-ident> Name wird dann als Wert der Eigenschaftanimation-timeline gesetzt.

Anonyme Scroll-Fortschrittszeitleiste

Die Eigenschaftanimation-timeline des zu animierenden Elements wird auf die Funktionscroll() gesetzt. Die zwei optionalen Parameter der Funktion definieren den Scroller, der die Scroll-Fortschrittszeitleiste bereitstellt, und die zu verwendende Scrollachse.

Sichtfortschrittszeitleiste

Eine Keyframe-Animation wird basierend auf der Veränderung der Sichtbarkeit eines Elements innerhalb eines Scrollers fortschreitend; dieses Element wird alsSubjekt bezeichnet. Standardmäßig befindet sich die Zeitleiste bei0%, wenn das Element zum ersten Mal an einem Rand des Scrollers sichtbar wird, und bei100%, wenn sein Endrand den gegenüberliegenden Rand des Scrollers verlässt. Eine Sichtfortschrittszeitleiste kann auf zwei Arten spezifiziert werden:

Benannte Sichtfortschrittszeitleiste

Das Subjekt wird explizit benannt, indem die Eigenschaftview-timeline-name (oder die Abkürzungview-timeline) auf ein<dashed-ident> gesetzt wird. Wenn Sie die Eigenschaftanimation-timeline des zu animierenden Elements auf dieses<dashed-ident> setzen, steuert die Sichtbarkeit des Subjekts den Fortschritt der Animation des Elements. Beachten Sie, dass das zu animierende Element nicht mit dem Subjekt identisch sein muss.

Anonyme Sichtfortschrittszeitleiste

Die Eigenschaftanimation-timeline des zu animierenden Elements wird auf eineview() Funktion gesetzt, wodurch es basierend auf seiner Sichtbarkeit innerhalb des Scrollports seines nächstgelegenen Elternscrollers animiert wird.

Keine Zeitleiste

Alle Animationszeitleisten können entfernt werden, indem ein Wert vonnone ausgewählt wird. Wennanimation-timeline: none gesetzt ist, findet keine Animation statt, da es keine Zeitleiste gibt, der gefolgt wird.

Dieanimation-timeline Eigenschaft ist in deranimation Abkürzung als ein nur-zurücksetzender Wert enthalten. Das heißt, dass die Aufnahme vonanimation einen zuvor deklariertenanimation-timeline Wert aufauto zurücksetzt. Da diese Komponente der Abkürzung nur zurücksetzt, kann ein spezifischer Wert nicht überanimation gesetzt werden. Bei der Erstellung vonCSS Scroll-gesteuerten Animationen müssen Sieanimation-timeline nach der Deklaration eineranimation Abkürzung deklarieren, damit sie wirksam wird.

Wenn Sie mehrere durch Kommas getrennte Werte angeben, wird jederanimation-timeline Wert auf eine einzelne Animation in der Reihenfolge angewendet, in der dieanimation-name Werte auftreten. Wenn die Anzahl der Werte in deranimation-timeline Deklaration größer ist als die Anzahl deranimation-name Werte, werden die überschüssigen Zeitleistenwerte ignoriert. Wenn wenigeranimation-timeline Werte alsanimation-name Werte vorhanden sind, werden dieanimation-timeline Werte in der angegebenen Reihenfolge wiederholt, bis jederanimation-name einen zugeordneten Zeitleistenwert hat.

Wenn zwei oder mehr Zeitleisten den gleichen<dashed-ident> Namen und die gleiche Spezifität teilen, wird die zuletzt innerhalb der Kaskade deklarierte verwendet. Wenn keine Zeitleiste gefunden wird, die mit einem in deranimation-timeline enthaltenen Namen übereinstimmt, wird deranimation-name, der mit diesem Wert assoziiert ist, nicht mit einer Zeitleiste assoziiert.

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

Grundlegende Nutzung

Dieses Beispiel zeigt die grundlegende Nutzung deranimation-timeline Eigenschaft zusammen mit den Wertennone,auto und dem Standardwert (auto).

HTML

Wir haben einen<article> mit drei<section> Kindern. Jedes<section> hat eine eindeutigeid und ein<div> Kind.

<article>  <section>    <div></div>  </section>  <section>    <div></div>  </section>  <section>    <div></div>  </section></article>

CSS

Wir verwenden dasflexible Box Layout, um die drei Abschnitte nebeneinander anzuordnen. Wir nutzengenerierten Inhalt, um dieid anzuzeigen. Wir gestalten alle Elemente gleich, indem wir dierotate@keyframes Animation anwenden, die das Element um eine volle Drehung dreht. Mit deranimation Abkürzung deklarieren wir unendliche, 2-sekündige, linear fortschreitende Iterationen derrotate Animation, indem wir die Richtung jeder Animation abwechseln.

article {  display: flex;  gap: 10px;  text-align: center;}section {  background-color: beige;  padding: 20px;}section::after {  content: attr(id);  display: block;}div {  height: 100px;  width: 100px;  background-color: magenta;  animation: rotate 2s infinite alternate linear;}@keyframes rotate {  to {    rotate: 1turn;  }}

Der einzige Unterschied ist die (oder das Fehlen der)animation-timeline Deklaration für jedes<div>.

#none div {  animation-timeline: none;}#auto div {  animation-timeline: auto;}

@layer no-support {  @supports not (animation-timeline: none) {    body::before {      content: "Your browser doesn't support the `animation-timeline` property";      background-color: wheat;      display: block;      text-align: center;      padding: 1em;    }  }}

Da dieanimation-timeline Eigenschaft in deranimation Abkürzung als ein nur-zurücksetzender Wert enthalten ist, mussanimation-timeline nach deranimation Abkürzung kommen oder mit größerer Spezifität angewendet werden als dieanimation Abkürzung, um angewendet zu werden.

Ergebnisse

Beachten Sie, dass das Deklarieren eines Wertes vonauto den gleichen Effekt hat wie das Zulassen, dassanimation-timeline auf diesen Wert voreingestellt bleibt, und dassnone alle Zeitleisten vom Element entfernt, sodass imnone Fall keine Animation stattfindet.

Einstellung einer benannten Scroll-Fortschrittszeitleiste

In diesem Beispiel wird die Animationszeitleiste auf eine horizontale Scroll-Fortschrittszeitleiste gesetzt.

HTML

Unser Container enthält drei Dehnelemente, die breit genug sind, um sicherzustellen, dass unser Container ein Scroll-Container ist. Das mittlere davon enthält eine Form, die wir animieren werden.

<div>  <div></div>  <div>    <div></div>  </div>  <div></div></div>

CSS

Wir definieren den Container als Flex-Container, wobei wir einewidth am Container setzen, die halb so breit ist wie seine kombinierten Flex-Kinder. Durch das Hinzufügen einesoverflow-x Wertes vonscroll wird er zu einem Scroll-Container mit horizontalem Scrollbalken.

Unsere Scroll-Fortschrittszeitleiste, definiert durch die Eigenschaftenscroll-timeline-name undscroll-timeline-axis, wird--square-timeline genannt. Diese Zeitleiste wird auf unser#square Element mitanimation-timeline: --square-timeline angewendet.

#container {  display: flex;  width: 300px;  border: 1px solid;  overflow-x: scroll;  scroll-timeline-axis: inline;  scroll-timeline-name: --square-timeline;}.stretcher {  flex: 0 0 200px;}

Das CSS unten definiert ein Quadrat, das sich in alternierenden Richtungen dreht, entsprechend der Zeitleiste, die von der Eigenschaftanimation-timeline bereitgestellt wird, die auf die oben genannte--square-timeline Zeitleiste gesetzt ist. Die Animation ist so eingestellt, dass sie zweimal stattfindet, in wechselnden Richtungen, während sie durch die Ansicht scrollt. Wir habenNischen-Ecken hinzugefügt, um den Animationseffekt deutlicher zu machen.

#shape {  background-color: deeppink;  width: 100px;  height: 100px;  border-radius: 25px;  corner-shape: notch;  animation: rotateAnimation 1ms linear 2 alternate;  animation-timeline: --square-timeline;}@keyframes rotateAnimation {  from {    transform: rotate(0deg);  }  to {    transform: rotate(360deg);  }}

@layer no-support {  @supports not (animation-timeline: --square-timeline) {    body::before {      content: "Your browser doesn't support named animation timelines.";      background-color: wheat;      display: block;      text-align: center;      padding: 1em;    }  }}

Ergebnis

Scrollen Sie, um das animierte Element zu sehen.

Einstellung einer anonymen Scroll-Fortschrittszeitleiste

Dieses Beispiel erweitert das vorherige, indem eine anonyme Scroll-Fortschrittszeitleiste mit der Funktionscroll() angewendet wird.

CSS

Wir übernehmen das gesamte CSS aus dem vorherigen Beispiel und setzen nur dieanimation-timeline Eigenschaft, um den Wert des vorherigen Beispiels zu überschreiben. Die Zeitleiste wird durch den Wertscroll(inline nearest) bereitgestellt, der die Scrollleiste in Richtung der Inlinescrollachse des nächstgelegenen übergeordneten Elements, das über Scrollleisten verfügt, auswählt. Dies ist die vertikale Scrollleiste des#container Elements, da die.stretcher Elemente keinen überlaufenden Inhalt haben und daher keine Scroll-Container sind.

#shape {  animation-timeline: scroll(inline nearest);}

@layer no-support {  @supports not (animation-timeline: scroll()) {    body::before {      content: "Your browser doesn't support the scroll() function.";      background-color: wheat;      display: block;      text-align: center;      padding: 1em;    }  }}

Ergebnis

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

Einstellung einer benannten Sichtfortschrittszeitleiste

In diesem Beispiel demonstrieren wir, wie eine benannte Sichtfortschrittszeitleiste erstellt und angewendet wird. Zwei Elemente werden animiert, wobei verschiedene Elemente als Scroller dienen.

HTML

<main>  <div>    <h1>Directions</h1>    <h2>Lincoln Memorial to Martin Luther King, Jr. Memorial</h2>    <ol>      <li>Head south on Lincoln Memorial Circle</li>      <li>Turn right toward Independence Ave</li>      <li>Turn left onto Independence Ave</li>      <li>Turn right onto West Basin Dr</li>      <li>Look up when you reach 64 Independence Ave!</li>    </ol>    <section>

Unser HTML enthält viel Text in einem Container innerhalb eines Scrollers, den wir der Kürze halber ausgeblendet haben. In der Mitte der Textwand fügen wir zwei<div> Elemente hinzu, die wir basierend auf der Sichtbarkeit des Elements selbst im ersten Fall und basierend auf der Sichtbarkeit seines übergeordneten Elements im zweiten Fall animieren werden:

<div>SELF</div><div>PARENT</div>

</section><h2>Martin Luther King, Jr. Memorial to Lincoln Memorial</h2><ol>  <li>Head north toward Independence Ave SW</li  ><li>Turn left onto Independence Ave</li  ><li>Turn right toward the Korean War Veterans Memorial</li  ><li>Take a photo of the memorial as you walk past it.</li  ><li>Head north on Lincoln Memorial Circle</li  ><li>Look up. You can't miss it!</li></ol>  </div></main>

CSS

Wir erstellen eine Keyframe-Animation, die die Deckkraft und die Skalierung des Elements ändert und sie auf beide animierte Elemente anwendet:

@keyframes animation-effect {  0% {    opacity: 0;    scale: 0;  }  100% {    opacity: 1;    scale: 1;  }}.animated-element {  animation: animation-effect 1ms linear;}

Dasself Element wird explizit als Scroller für sich selbst benannt, indem die Eigenschaftview-timeline-name auf ein<dashed-ident> gesetzt wird, und auch der<dashed-ident> Name als Wert der Eigenschaftanimation-timeline gesetzt wird. Imparent-Fall setzen wircontainer als Scroller für das animierte Element:

.self {  view-timeline-name: --self-scroller-element;  animation-timeline: --self-scroller-element;}.container {  view-timeline-name: --parent-scroller-element;}.parent {  animation-timeline: --parent-scroller-element;}

Zusätzliche CSS-Deklarationen wurden der Kürze halber versteckt.

@layer setup {  section {    display: flex;    gap: 10px;  }  main {    width: 400px;    padding: 1em;    height: 300px;    overflow: scroll;    border: 1px solid;    background-color: beige;    font-family: sans-serif;  }  li {    margin-bottom: 0.75lh;  }  .animated-element {    height: 200px;    width: calc(100% - 2em);    margin: auto;    background-color: forestgreen;    background-image:      repeating-linear-gradient(37deg, transparent 0 52px, beige 52px 57px),      repeating-linear-gradient(94deg, transparent 0 52px, beige 52px 57px);    border: 1px solid;    font-size: 3em;    place-content: center;  }}

Ergebnis

Scrollen Sie den Container, um beide Elemente zu sehen, wenn sie animiert werden.

Beachten Sie, wie die Sichtbarkeit desself Elements seine eigene Animation steuert. In diesem Fall befindet sich das Element an der0% Schlüsselbild, wenn die obere Kante in den Sichtbereich oder den sichtbaren Teil des Scrollports eintritt, und erreicht nur dann die100% Schlüsselbild, wenn die untere Kante den Sichtbereich verlässt.

Dasparent Element wird nur sichtbar, wenn der Elternteil sichtbar ist, was bedeutet, dass es, wenn es in den Sichtbereich kommt, bereits etwa25% der Animation durchlaufen hat. Es ist nur etwa75% seiner Animation, wenn es den oberen Teil des Sichtbereichs verlässt.

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
• view-timeline-name,view-timeline-axis,view-timeline,view-timeline-inset
• AnimationTimeline
• Leitfaden: Verwendung von CSS-Animationen
• CSS-Animationen Modul
• CSS Scroll-gesteuerte Animationen Modul