CSS-Animationen ermöglichen es, Übergänge von einer CSS-Stilkonfiguration zu einer anderen zu animieren. Animationen bestehen aus zwei Komponenten: einem Stil, der die CSS-Animation beschreibt, und einer Reihe von Keyframes, die die Start- und Endzustände des Animationsstils sowie mögliche Zwischenstationen angeben.

Es gibt drei wesentliche Vorteile von CSS-Animationen gegenüber traditionellen, scriptgesteuerten Animationstechniken:

1. Sie sind einfach zu verwenden für grundlegende Animationen; Sie können sie erstellen, ohne JavaScript kennen zu müssen.
2. Die Animationen laufen gut, selbst bei moderater Systembelastung. Einfache Animationen können in JavaScript oft schlecht performen. Die Rendering-Engine kann Frame-Skipping und andere Techniken verwenden, um die Performance so glatt wie möglich zu halten.
3. Indem der Browser die Animationssequenz kontrolliert, kann er die Performance und Effizienz optimieren, indem er beispielsweise die Aktualisierungsrate von Animationen reduziert, die in derzeit nicht sichtbaren Tabs laufen.

Konfigurieren einer Animation

Um eine CSS-Animationssequenz zu erstellen, stylen Sie das Element, das Sie animieren möchten, mit deranimation-Eigenschaft oder deren Untereigenschaften. Dies ermöglicht es Ihnen, das Timing, die Dauer und andere Details zu konfigurieren, wie die Animationssequenz ablaufen soll. Dies konfiguriertnicht das tatsächliche Aussehen der Animation, das mit der@keyframes-At-Regel konfiguriert wird, wie im AbschnittDefinieren einer Animationssequenz mit Keyframes unten beschrieben.

Die Untereigenschaften deranimation-Eigenschaft sind:

animation-composition

Gibt diecomposite operation an, die verwendet werden soll, wenn mehrere Animationen dieselbe Eigenschaft gleichzeitig beeinflussen. Diese Eigenschaft ist nicht Teil deranimation-Kurzschreibweise.

animation-delay

Gibt die Verzögerung zwischen dem Laden eines Elements und dem Start einer Animationssequenz an und ob die Animation sofort von Anfang an oder mittendrin starten soll.

animation-direction

Gibt an, ob die erste Iteration einer Animation vorwärts oder rückwärts verlaufen soll und ob nachfolgende Iterationen die Richtung bei jedem Durchlauf der Sequenz abwechseln oder auf den Startpunkt zurückgesetzt und wiederholt werden sollen.

animation-duration

Gibt die Länge der Zeit an, in der eine Animation einen Zyklus abschließt.

animation-fill-mode

Gibt an, wie eine Animation Stile auf ihr Ziel vor und nach dem Ausführen anwendet.

Hinweis:Im Fall des Animationsfüllmodusforwards verhalten sich die animierten Eigenschaften so, als ob sie in einem Wert der Eigenschaftwill-change enthalten wären. Wenn während der Animation ein neuer Stacking-Kontext erstellt wurde, behält das Zielelement den Stacking-Kontext bei, nachdem die Animation abgeschlossen ist.

animation-iteration-count

Gibt an, wie oft eine Animation wiederholt werden soll.

animation-name

Gibt den Namen der@keyframes-At-Regel an, die die Keyframes einer Animation beschreibt.

animation-play-state

Gibt an, ob eine Animationssequenz pausiert oder abgespielt werden soll.

animation-timeline

Gibt die Zeitleiste an, die zur Steuerung des Fortschritts einer CSS-Animation verwendet wird.

animation-timing-function

Gibt an, wie eine Animation durch Keyframes verläuft, indem Beschleunigungskurven festgelegt werden.

Definieren einer Animationssequenz mit Keyframes

Nachdem Sie das Timing der Animation konfiguriert haben, müssen Sie das Aussehen der Animation definieren. Dies geschieht durch das Festlegen eines oder mehrerer Keyframes mit der@keyframes-At-Regel. Jedes Keyframe beschreibt, wie das animierte Element zu einem bestimmten Zeitpunkt während der Animationssequenz gerendert werden soll.

Da das Timing der Animation im CSS-Stil definiert ist, der die Animation konfiguriert, verwenden Keyframes einen<percentage>, um den Zeitpunkt während der Animationssequenz anzugeben, zu dem sie stattfinden. 0% bezeichnet den ersten Moment der Animationssequenz, während 100% den Endzustand der Animation angibt. Weil diese beiden Zeiten so wichtig sind, haben sie spezielle Aliase:from undto. Beide sind optional. Wennfrom/0% oderto/100% nicht angegeben ist, beginnt oder endet der Browser die Animation mit den berechneten Werten aller Attribute.

Sie können optional zusätzliche Keyframes einfügen, die Zwischenstufen zwischen dem Anfang und dem Ende der Animation beschreiben.

Verwendung der Animations-Kurzschreibweise

Dieanimation-Kurzschreibweise ist nützlich, um Platz zu sparen. Ein Beispiel, einige der Regeln, die wir in diesem Artikel verwenden:

p {  animation-duration: 3s;  animation-name: slide-in;  animation-iteration-count: infinite;  animation-direction: alternate;}

...könnten durch die Verwendung deranimation-Kurzschreibweise ersetzt werden.

p {  animation: 3s infinite alternate slide-in;}

Um mehr über die Reihenfolge zu erfahren, in der verschiedene Animationswerte mit deranimation-Kurzschreibweise angegeben werden können, siehe dieanimation-Referenzseite.

Festlegen mehrerer Animationswerte

Die CSS-Animations-Langschreib-Eigenschaften können mehrere Werte akzeptieren, die durch Kommas getrennt sind. Dieses Feature kann verwendet werden, wenn Sie mehrere Animationen in einer einzelnen Regel anwenden und für jede der Animationen verschiedene Dauern, Wiederholzahlen usw. festlegen möchten. Lassen Sie uns einige schnelle Beispiele ansehen, um die verschiedenen Permutationen zu erklären.

Im ersten Beispiel gibt es drei Werte für die Dauer und die Anzahl der Wiederholungen. Jede Animation wird mit einem Wert für die Dauer und die Wiederholungsanzahl an derselben Position wie der Animationsname zugewiesen. DiefadeInOut-Animation erhält eine Dauer von2.5s und eine Wiederholungsanzahl von2, und diebounce-Animation erhält eine Dauer von1s und eine Wiederholungsanzahl von5.

animation-name: fadeInOut, moveLeft300px, bounce;animation-duration: 2.5s, 5s, 1s;animation-iteration-count: 2, 1, 5;

Im zweiten Beispiel sind drei Animationsnamen festgelegt, jedoch gibt es nur eine Dauer und eine Wiederholungsanzahl. In diesem Fall erhalten alle drei Animationen dieselbe Dauer und Wiederholungsanzahl.

animation-name: fadeInOut, moveLeft300px, bounce;animation-duration: 3s;animation-iteration-count: 1;

Im dritten Beispiel werden drei Animationen angegeben, aber nur zwei Dauern und Wiederholungszahlen. In solchen Fällen, in denen nicht genügend Werte in der Liste vorhanden sind, um jedem eine eigene Animation zuzuweisen, wird die Wertezuweisung vom ersten bis zum letzten Element in der verfügbaren Liste durchlaufen und dann zum ersten Element zurückgekehrt. So erhältfadeInOut eine Dauer von2.5s undmoveLeft300px eine Dauer von5s, was der letzte Wert in der Liste der Dauerwerte ist. Die Dauerwertzuweisung wird jetzt auf den ersten Wert zurückgesetzt;bounce erhält daher eine Dauer von2.5s. Die Wiederholungszahlen (und alle anderen von Ihnen angegebenen Eigenschaftswerte) werden auf die gleiche Weise zugewiesen.

animation-name: fadeInOut, moveLeft300px, bounce;animation-duration: 2.5s, 5s;animation-iteration-count: 2, 1;

Wenn das Missverhältnis in der Anzahl der Animationen und der Animationswerte umgekehrt ist, sagen wir fünfanimation-duration-Werte für dreianimation-name-Werte, dann gelten die zusätzlichen oder ungenutzten Animationswerte, in diesem Fall zweianimation-duration-Werte, auf keine Animation und werden ignoriert.

Beispiele

Text über das Browserfenster gleiten lassen

Dieses grundlegende Beispiel gestaltet ein<p>-Element mit den Übergangseigenschaftentranslate undscale, sodass der Text von der rechten Rand des Browserfensters hinein gleitet.

p {  animation-duration: 3s;  animation-name: slide-in;}@keyframes slide-in {  from {    translate: 150vw 0;    scale: 200% 1;  }  to {    translate: 0 0;    scale: 100% 1;  }}

In diesem Beispiel gibt der Stil für das<p>-Element an, dass die Animation 3 Sekunden dauern soll, um von Anfang bis Ende auszuführen, unter Verwendung der Eigenschaftanimation-duration, und dass der Name der@keyframes-At-Regel, die die Keyframes für die Animationssequenz definiert,slide-in ist.

In diesem Fall haben wir nur zwei Keyframes. Das erste tritt bei0% auf (unter Verwendung des Aliasfrom). Hier konfigurieren wir dietranslate-Eigenschaft des Elements auf150vw (das ist jenseits des äußeren rechten Rands des enthaltenen Elements), und diescale des Elements auf 200% (oder das Doppelte der Standardbreite), wodurch der Absatz doppelt so breit wie sein<body>-Enthaltensblock wird. Dies führt dazu, dass der erste Frame der Animation die Kopfzeile außerhalb des rechten Randes des Browserfensters hat.

Das zweite Keyframe tritt bei100% auf (unter Verwendung des Aliasto). Dietranslate-Eigenschaft wird auf0% festgelegt und diescale des Elements wird auf1 gesetzt, was100% entspricht. Dies führt dazu, dass die Kopfzeile ihre Animation in ihrem Standardzustand abschließt, bündig am linken Rand des Inhaltsbereichs.

<p>  The Caterpillar and Alice looked at each other for some time in silence: at  last the Caterpillar took the hookah out of its mouth, and addressed her in a  languid, sleepy voice.</p>

Eine weitere Keyframe-Animation hinzufügen

Fügen wir der Animation aus dem vorherigen Beispiel ein weiteres Keyframe hinzu. Angenommen, wir möchten, dass Alices Name rosa wird und wächst und dann wieder auf seine ursprüngliche Größe und Farbe schrumpft, während er sich von rechts nach links bewegt. Während wir diefont-size ändern könnten, wirkt sich das Ändern von Eigenschaften, die das Boxmodell beeinflussen, negativ auf die Leistung aus. Stattdessen wickeln wir ihren Namen in einen<span> und skalieren dann und weisen eine Farbe nur diesem zu. Dazu muss eine zweite Animation hinzugefügt werden, die nur den<span> beeinflusst:

@keyframes grow-shrink {  25%,  75% {    scale: 100%;  }  50% {    scale: 200%;    color: magenta;  }}

Der vollständige Code sieht jetzt so aus:

p {  animation-duration: 3s;  animation-name: slide-in;}p span {  display: inline-block;  animation-duration: 3s;  animation-name: grow-shrink;}@keyframes slide-in {  from {    translate: 150vw 0;    scale: 200% 1;  }  to {    translate: 0 0;    scale: 100% 1;  }}@keyframes grow-shrink {  25%,  75% {    scale: 100%;  }  50% {    scale: 200%;    color: magenta;  }}

Wir haben einen<span> um "Alice" hinzugefügt:

<p>  The Caterpillar and <span>Alice</span> looked at each other for some time in  silence: at last the Caterpillar took the hookah out of its mouth, and  addressed her in a languid, sleepy voice.</p>

Dies teilt dem Browser mit, dass der Name für die ersten und letzten 25% der Animation normal sein soll, aber in der Mitte rosa werden soll, während er und wieder zurück skaliert wird. Wir setzen diedisplay-Eigenschaft des span aufinline-block, da dietransform-Eigenschaften deninline-level content nicht beeinflussen.

Die Animation wiederholen

Um die Animation wiederholen zu lassen, verwenden Sie dieanimation-iteration-count-Eigenschaft, um anzugeben, wie oft die Animation wiederholt werden soll. In diesem Fall verwenden wirinfinite, um die Animation unendlich oft wiederholen zu lassen:

p {  animation-duration: 3s;  animation-name: slide-in;  animation-iteration-count: infinite;}

@keyframes slide-in {  from {    translate: 150vw 0;    scale: 200% 1;  }  to {    translate: 0 0;    scale: 100% 1;  }}

<p>  The Caterpillar and Alice looked at each other for some time in silence: at  last the Caterpillar took the hookah out of its mouth, and addressed her in a  languid, sleepy voice.</p>

Die Animation hin- und herbewegen

Das machte es wiederholbar, aber es ist sehr seltsam, dass es bei jedem Start der Animation wieder zurück zum Anfang springt. Was wir wirklich wollen, ist, dass es sich hin- und her über den Bildschirm bewegt. Das wird einfach erreicht, indemanimation-direction aufalternate gesetzt wird:

p {  animation-duration: 3s;  animation-name: slide-in;  animation-iteration-count: infinite;  animation-direction: alternate;}

@keyframes slide-in {  from {    translate: 150vw 0;    scale: 200% 1;  }  to {    translate: 0 0;    scale: 100% 1;  }}

<p>  The Caterpillar and Alice looked at each other for some time in silence: at  last the Caterpillar took the hookah out of its mouth, and addressed her in a  languid, sleepy voice.</p>

Verwenden von Animationsereignissen

Sie können zusätzliche Kontrolle über Animationen erhalten – sowie nützliche Informationen über sie – indem Sie Animationsereignisse verwenden. Diese Ereignisse, dargestellt durch dasAnimationEvent-Objekt, können verwendet werden, um zu erkennen, wann Animationen starten, enden und eine neue Iteration beginnen. Jedes Ereignis enthält die Zeit, zu der es auftrat, sowie den Namen der Animation, die das Ereignis ausgelöst hat.

Wir werden das Beispiel mit dem gleitenden Text ändern, um einige Informationen über jedes Animationsereignis auszugeben, wenn es auftritt, damit wir einen Eindruck davon bekommen, wie sie funktionieren.

Wir haben die gleiche Keyframe-Animation wie im vorherigen Beispiel aufgenommen. Diese Animation dauert 3 Sekunden, wird "slide-in" genannt, wiederholt 3-mal und bewegt sich in jeder Runde in einer alternativen Richtung. In der@keyframes werden die Skalierung und die Translation entlang der x-Achse manipuliert, um das Element über den Bildschirm gleiten zu lassen.

.slide-in {  animation-duration: 3s;  animation-name: slide-in;  animation-iteration-count: 3;  animation-direction: alternate;}

@keyframes slide-in {  from {    translate: 150vw 0;    scale: 200% 1;  }  to {    translate: 0 0;    scale: 100% 1;  }}

Hinzufügen der Animationsereignis-Listener

Wir verwenden JavaScript-Code, um alle drei möglichen Animationsereignisse zu überwachen. Dieser Code konfiguriert unsere Ereignis-Listener; wir rufen ihn auf, wenn das Dokument zum ersten Mal geladen wird, um die Dinge einzurichten.

const element = document.getElementById("watch-me");element.addEventListener("animationstart", listener);element.addEventListener("animationend", listener);element.addEventListener("animationiteration", listener);element.className = "slide-in";

Dies ist ziemlich standardmäßiger Code; Sie können Details dazu, wie er funktioniert, in der Dokumentation füreventTarget.addEventListener() erhalten. Das Letzte, was dieser Code tut, ist, dieclass des Elements, das wir animieren werden, auf "slide-in" zu setzen; wir tun dies, um die Animation zu starten.

Warum? Weil dasanimationstart-Ereignis sofort ausgelöst wird, wenn die Animation startet, und in unserem Fall passiert das, bevor unser Code ausgeführt wird. Daher starten wir die Animation selbst, indem wir die Klasse des Elements auf den nachträglich animierten Stil setzen.

Empfang der Ereignisse

Die Ereignisse werden an dielistener()-Funktion geliefert, die unten gezeigt wird.

function listener(event) {  const l = document.createElement("li");  switch (event.type) {    case "animationstart":      l.textContent = `Started: elapsed time is ${event.elapsedTime}`;      break;    case "animationend":      l.textContent = `Ended: elapsed time is ${event.elapsedTime}`;      break;    case "animationiteration":      l.textContent = `New loop started at time ${event.elapsedTime}`;      break;  }  document.getElementById("output").appendChild(l);}

Auch dieser Code ist sehr einfach. Er schaut auf denevent.type, um zu bestimmen, welche Art von Animationsereignis auftrat, und fügt dann eine entsprechende Notiz zu der<ul> (ungeordnete Liste) hinzu, die wir zur Protokollierung dieser Ereignisse verwenden.

Die Ausgabe, wenn alles gesagt und getan ist, sieht ungefähr so aus:

• Gestartet: Verstrichene Zeit ist 0
• Neuer Loop startete zu Zeit 3.01200008392334
• Neuer Loop startete zu Zeit 6.00600004196167
• Beendet: Verstrichene Zeit ist 9.234000205993652

Beachten Sie, dass die Zeiten sehr nahe, aber nicht genau denen erwartet werden, die in der bei der Animation konfigurierten Zeit festgelegt wurden. Beachten Sie auch, dass nach der letzten Iteration der Animation dasanimationiteration-Ereignis nicht gesendet wird; stattdessen wird dasanimationend-Ereignis gesendet.

Nur der Vollständigkeit halber, hier ist das HTML, das den Seiteninhalt anzeigt, einschließlich der Liste, in die das Skript Informationen über die empfangenen Ereignisse einfügt:

<h1>Watch me move</h1><p>  This example shows how to use CSS animations to make <code>H1</code>  elements move across the page.</p><p>  In addition, we output some text each time an animation event fires, so you  can see them in action.</p><ul></ul>

Und hier ist die Live-Ausgabe.

Animieren von Display und content-visibility

Dieses Beispiel zeigt, wiedisplay undcontent-visibility animiert werden können. Dieses Verhalten ist nützlich, um Ein- und Ausstiegsanimationen zu erstellen, bei denen Sie beispielsweise einen Container aus dem DOM mitdisplay: none entfernen möchten, aber ihn mitopacity sanft ausblenden, anstatt sofort zu verschwinden.

Unterstützende Browser animierendisplay undcontent-visibility mit einer Variation desdiskreten Animationstyps. Dies bedeutet im Allgemeinen, dass Eigenschaften 50% der gesamten Animationsdauer zwischen den beiden Werten umschalten.

Es gibt jedoch eine Ausnahme, und zwar beim Animieren von/zudisplay: none odercontent-visibility: hidden zu einem sichtbaren Wert. In diesem Fall wird der Browser zwischen den beiden Werten so umschalten, dass der animierte Inhalt während der gesamten Animationsdauer angezeigt wird.

Zum Beispiel:

• Beim Animieren vondisplay vonnone zublock (oder einem anderen sichtbarendisplay-Wert) wird der Wert bei0% der Animationsdauer aufblock umgeschaltet, damit er die ganze Zeit sichtbar ist.
• Beim Animieren vondisplay vonblock (oder einem anderen sichtbarendisplay-Wert) zunone wird der Wert bei100% der Animationsdauer aufnone umgeschaltet, damit er die ganze Zeit sichtbar ist.

HTML

Das HTML enthält zwei<p>-Elemente mit einem<div> dazwischen, das wir vondisplaynone zublock animieren werden.

<p>  Click anywhere on the screen or press any key to toggle the  <code>&lt;div&gt;</code> between hidden and showing.</p><div>  This is a <code>&lt;div&gt;</code> element that animates between  <code>display: none; opacity: 0</code> and  <code>display: block; opacity: 1</code>. Neat, huh?</div><p>  This is another paragraph to show that <code>display: none;</code> is being  applied and removed on the above <code>&lt;div&gt; </code>. If only its  <code>opacity</code> was being changed, it would always take up the space in  the DOM.</p>

CSS

html {  height: 100vh;}div {  font-size: 1.6rem;  padding: 20px;  border: 3px solid red;  border-radius: 20px;  width: 480px;  opacity: 0;  display: none;}/* Animation classes */div.fade-in {  display: block;  animation: fade-in 0.7s ease-in forwards;}div.fade-out {  animation: fade-out 0.7s ease-out forwards;}/* Animation keyframes */@keyframes fade-in {  0% {    opacity: 0;    display: none;  }  100% {    opacity: 1;    display: block;  }}@keyframes fade-out {  0% {    opacity: 1;    display: block;  }  100% {    opacity: 0;    display: none;  }}

Beachten Sie die Einbeziehung derdisplay-Eigenschaft in die Keyframe-Animationen.

JavaScript

Schließlich fügen wir ein wenig JavaScript hinzu, um die Ereignis-Listener zu aktivieren, die die Animation auslösen. Insbesondere fügen wir diefade-in-Klasse zum<div> hinzu, wenn es erscheinen soll, undfade-out, wenn es verschwinden soll.

const divElem = document.querySelector("div");const htmlElem = document.querySelector(":root");htmlElem.addEventListener("click", showHide);document.addEventListener("keydown", showHide);function showHide() {  if (divElem.classList[0] === "fade-in") {    divElem.classList.remove("fade-in");    divElem.classList.add("fade-out");  } else {    divElem.classList.remove("fade-out");    divElem.classList.add("fade-in");  }}

Ergebnis

Der Code rendert wie folgt:

Siehe auch

• CSS-Animationen-Modul
• AnimationEvent
• Verwenden von CSS-Übergängen
• Verwendung der Web Animations API