`animation-timeline` CSS property

Eingeschränkt verfügbar

Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.

Want more browser support for this feature? Tell us why.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die CSS-Eigenschaft animation-timeline legt die Timeline fest, die zur Steuerung des Fortschritts einer CSS-Animation verwendet wird.

Syntax

css

/* Keyword values */
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

Die Eigenschaft animation-timeline wird als ein oder mehrere durch Kommas getrennte Werte angegeben, wobei jeder davon einer der folgenden sein kann:

none: Die Animation ist keiner Timeline zugeordnet, und es findet keine Animation statt.
auto: Die Timeline der Animation ist die standardmäßige DocumentTimeline des Dokuments. Dies ist der Standardwert.
scroll(): Definiert das Root-Element, den nächsten Scroller oder das Element selbst als anonyme Scroll-Fortschritts-Timeline und optional die Scrollrichtung des Scrollers.
view(): Definiert den nächsten übergeordneten Scroll-Container als anonyme View-Fortschritts-Timeline und überschreibt optional die Standard-Achsenrichtung baseline sowie die automatischen Start- und End-Insets auto.
<dashed-ident>: Der Name einer scrollgesteuerten oder View-Fortschritts-Timeline, wie durch die Eigenschaft scroll-timeline-name oder view-timeline-name des Scroll-Containers definiert (oder durch die Kurzformeigenschaft scroll-timeline oder view-timeline).

Die Standard-Timeline für eine CSS-Keyframe-Animation ist die zeitbasierte DocumentTimeline. Die Eigenschaft animation-timeline kann verwendet werden, um eine benannte oder anonyme Scroll-Fortschritts- oder View-Fortschritts-Timeline festzulegen. Alternativ kann sie verwendet werden, um die standardmäßige zeitbasierte Dokument-Timeline explizit festzulegen, den Fortschritt einer Animation eines Elements zu steuern oder überhaupt keine Timeline zu verwenden; in diesem Fall wird das Element nicht animiert.

Über animation-timeline können die folgenden Typen von Timelines festgelegt werden:

DocumentTimeline

Die Standard-Dokument-Timeline, die durch das Verstreichen der Zeit seit dem ersten Laden des Dokuments im Browser fortschreitet. Dies ist die Timeline, die traditionell mit CSS-Animationen verbunden ist. Sie wird mit dem Wert auto ausgewählt oder indem überhaupt kein Wert für animation-timeline angegeben wird, da dies der Standardwert ist.

Scroll-Fortschritts-Timeline

Die Animation schreitet durch das horizontale oder vertikale Scrollen eines scrollbaren Elements oder Scrollers fort. Das Element, das die Scroll-Fortschritts-Timeline bereitstellt, kann auf zwei Arten angegeben werden:

Benannte Scroll-Fortschritts-Timeline: Der Scroller wird explizit benannt, indem die Eigenschaft scroll-timeline-name (oder die Kurzformeigenschaft scroll-timeline) auf ein <dashed-ident> gesetzt wird; dieser Name <dashed-ident> wird dann als Wert der Eigenschaft animation-timeline festgelegt.
Anonyme Scroll-Fortschritts-Timeline: Die Eigenschaft animation-timeline des zu animierenden Elements wird auf die Funktion scroll() gesetzt. Die zwei optionalen Parameter der Funktion definieren den Scroller, der die Scroll-Fortschritts-Timeline bereitstellt, und die zu verwendende Scroll-Achse.

View-Fortschritts-Timeline

Eine Keyframe-Animation schreitet basierend auf der Änderung der Sichtbarkeit eines Elements innerhalb eines Scrollers fort; dieses Element wird als Subjekt bezeichnet. Standardmäßig befindet sich die Timeline bei 0%, wenn das Element erstmals an einer Kante des Scrollers sichtbar wird, und bei 100%, wenn seine Endkante die gegenüberliegende Kante des Scrollers verlässt. Eine View-Fortschritts-Timeline kann auf zwei Arten angegeben werden:

Benannte View-Fortschritts-Timeline: Das Subjekt wird explizit benannt, indem die Eigenschaft view-timeline-name (oder die Kurzformeigenschaft view-timeline) auf ein <dashed-ident> gesetzt wird. Wenn Sie die Eigenschaft animation-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 View-Fortschritts-Timeline: Die Eigenschaft animation-timeline des zu animierenden Elements wird auf eine Funktion view() gesetzt, wodurch es basierend auf seiner Sichtbarkeit innerhalb des Scrollports seines nächsten übergeordneten Scrollers animiert wird.

Keine Timeline

Alle Animations-Timelines können durch Auswahl des Werts none entfernt werden. Wenn animation-timeline: none gesetzt ist, findet keine Animation statt, da keine Timeline vorhanden ist, der gefolgt werden kann.

Die Eigenschaft animation-timeline ist in der Kurzformeigenschaft animation als Wert enthalten, der nur zurückgesetzt werden kann. Das bedeutet, dass die Verwendung von animation einen zuvor deklarierten Wert von animation-timeline auf auto zurücksetzt. Da diese Komponente der Kurzform nur zurückgesetzt werden kann, kann über animation kein bestimmter Wert festgelegt werden. Beim Erstellen von scrollgesteuerten CSS-Animationen müssen Sie animation-timeline nach einer beliebigen Kurzformdeklaration von animation deklarieren, damit sie wirksam wird.

Wenn Sie mehrere durch Kommas getrennte Werte angeben, wird jeder Wert von animation-timeline in der Reihenfolge, in der die Werte von animation-name erscheinen, auf eine einzelne Animation angewendet. Ist die Anzahl der Werte in der Deklaration animation-timeline größer als die Anzahl der Werte von animation-name, werden die überschüssigen Timeline-Werte ignoriert. Gibt es weniger Werte von animation-timeline als Werte von animation-name, werden die Werte von animation-timeline der Reihe nach wiederholt, bis jedem animation-name eine Timeline zugeordnet ist.

Wenn zwei oder mehr Timelines denselben Namen <dashed-ident> und dieselbe Spezifität haben, wird die zuletzt innerhalb der Kaskade deklarierte verwendet. Wenn keine Timeline gefunden wird, die einem in animation-timeline enthaltenen Namen entspricht, wird der diesem Wert zugeordnete animation-name keiner Timeline zugeordnet.

Formale Definition

Anfangswert	`auto`
Anwendbar auf	alle Elemente
Vererbt	Nein
Berechneter Wert	a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
Animationstyp	Not animatable

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 Verwendung

Dieses Beispiel demonstriert die grundlegende Verwendung der Eigenschaft animation-timeline zusammen mit den Werten none, auto und dem Standardwert (auto).

HTML

Wir haben ein <article> mit drei untergeordneten <section>-Elementen. Jedes <section> hat eine eindeutige id und ein untergeordnetes <div>-Element.

html

<article>
  <section id="none">
    <div></div>
  </section>
  <section id="auto">
    <div></div>
  </section>
  <section id="default">
    <div></div>
  </section>
</article>

CSS

Wir verwenden das Flexible-Box-Layout, um die drei Abschnitte nebeneinander anzuordnen. Wir verwenden generierten Inhalt, um die id anzuzeigen. Wir gestalten alle Elemente gleich und wenden die Animation rotate mit @keyframes an, die das Element um eine volle Umdrehung dreht. Mit der Kurzformeigenschaft animation deklarieren wir unendliche, zwei Sekunden lange, linear fortschreitende Iterationen der Animation rotate, wobei die Richtung jeder Animation abwechselt.

css

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 Deklaration von animation-timeline – oder ihr Fehlen im Fall von default – für jedes <div>.

css

#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: 1rem 0;
    }
  }
}

Da die Eigenschaft animation-timeline in der Kurzformeigenschaft animation als Wert enthalten ist, der nur zurückgesetzt werden kann, muss animation-timeline nach der Kurzformeigenschaft animation stehen oder mit einer höheren Spezifität als die Kurzformeigenschaft animation angewendet werden, damit sie wirksam wird.

Ergebnisse

Beachten Sie, dass die Deklaration eines Werts von auto denselben Effekt hat wie das Standardverhalten von animation-timeline, und dass none alle Timelines vom Element entfernt, sodass im Fall von none keine Animation stattfindet.

Festlegen einer benannten Scroll-Fortschritts-Timeline

In diesem Beispiel wird die Animations-Timeline auf eine horizontale Scroll-Fortschritts-Timeline gesetzt.

HTML

Unser Container enthält drei Streckelemente, die breit genug sind, damit unser Container ein Scroll-Container wird. Das mittlere enthält eine Form, die wir animieren werden.

html

<div id="container">
  <div class="stretcher"></div>
  <div class="stretcher">
    <div id="shape"></div>
  </div>
  <div class="stretcher"></div>
</div>

CSS

Wir definieren den Container als Flex-Container und legen für den Container eine width fest, die halb so breit ist wie seine kombinierten Flex-Kindelemente. Das Hinzufügen eines overflow-x-Werts von scroll sorgt dafür, dass er eine horizontale Scrollbar erhält.

Unsere Scroll-Fortschritts-Timeline, die mit den Eigenschaften scroll-timeline-name und scroll-timeline-axis definiert wird, heißt --square-timeline. Diese Timeline wird mithilfe von animation-timeline: --square-timeline auf unser Element #shape angewendet.

css

#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 folgende CSS definiert ein Quadrat, das entsprechend der von der Eigenschaft animation-timeline bereitgestellten Timeline in abwechselnde Richtungen rotiert, welche auf die oben benannte Timeline --square-timeline gesetzt ist. Die Animation ist so eingestellt, dass sie beim Durchlaufen des Viewports zweimal und in abwechselnden Richtungen ausgeführt wird. Wir haben ausgeklinkte Ecken hinzugefügt, um den Animationseffekt deutlicher zu machen.

css

#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: 1rem 0;
    }
  }
}

Ergebnis

Scrollen Sie, um das animierte Element zu sehen.

Festlegen einer anonymen Scroll-Fortschritts-Timeline

Dieses Beispiel erweitert das vorherige und wendet mithilfe der Funktion scroll() eine anonyme Scroll-Fortschritts-Timeline an.

CSS

Wir übernehmen das gesamte CSS aus dem vorherigen Beispiel und setzen nur die Eigenschaft animation-timeline, um den Wert aus dem vorherigen Beispiel zu überschreiben. Die Timeline wird durch den Wert scroll(inline nearest) bereitgestellt, der die Scrollbar in Inline-Richtung des nächsten übergeordneten Elements auswählt, das Scrollbars hat. Dies ist die vertikale Scrollbar des Elements #container, da die Elemente .stretcher keinen überlaufenden Inhalt haben und daher keine Scroll-Container sind.

css

#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: 1rem 0;
    }
  }
}

Ergebnis

Scrollen Sie, um das animierte quadratische Element zu sehen.

Festlegen einer benannten View-Fortschritts-Timeline

In diesem Beispiel demonstrieren wir, wie eine benannte View-Fortschritts-Timeline erstellt und angewendet wird. Zwei Elemente werden animiert, wobei unterschiedliche Elemente als Scroller dienen.

HTML

<main class="scroller">
  <div class="container">
    <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 aus Gründen der Kürze ausgeblendet haben. In der Mitte des Textblocks fügen wir zwei <div>-Elemente ein, die wir im ersten Fall basierend auf der Sichtbarkeit des Elements selbst und im zweiten Fall basierend auf der Sichtbarkeit seines übergeordneten Elements animieren:

html

<div class="animated-element self">SELF</div>
<div class="animated-element parent">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, welche die Deckkraft und Skalierung des Elements ändert, und wenden sie auf beide animierten Elemente an:

css

@keyframes animation-effect {
  0% {
    opacity: 0;
    scale: 0;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}

.animated-element {
  animation: animation-effect 1ms linear;
}

Das Element self wird explizit als Scroller für sich selbst benannt, indem die Eigenschaft view-timeline-name auf ein <dashed-ident> gesetzt wird und dieser Name <dashed-ident> ebenfalls als Wert der Eigenschaft animation-timeline festgelegt wird. Im Fall von parent setzen wir den container als Scroller für das animierte Element:

css

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

Weitere CSS-Deklarationen wurden aus Gründen der Kürze ausgeblendet.

@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 animiert zu sehen.

Beachten Sie, wie die Sichtbarkeit des Elements self seine eigene Animation steuert. In diesem Fall befindet sich das Element beim 0%-Keyframe, wenn die obere Kante den Viewport bzw. den sichtbaren Teil des Scrollports betritt, und erreicht den 100%-Keyframe erst, wenn die untere Kante den Viewport verlässt.

Das Element parent wird erst sichtbar, wenn dieses übergeordnete Element sichtbar ist. Das bedeutet, dass es beim Erscheinen bereits etwa 25% der Animation durchlaufen hat. Wenn es den oberen Bereich des Viewports verlässt, hat es erst etwa 75% seiner Animation durchlaufen.