CSS-Animations-Tutorial: Vollständiger Leitfaden für Anfänger

Dies ist ein vollständiger Syntaxleitfaden und ein interaktives Tutorial für CSS-Animationen für Anfänger. Verwenden Sie es als Referenz, um die verschiedenen Teile der CSS-Animationsspezifikation zu lernen.

Die Browserleistung hat sich in den letzten 10 Jahren stark entwickelt. Früher war es aufgrund möglicher Rendering- und Leistungsprobleme viel schwieriger, Webseiten interaktive Animationen hinzuzufügen. Aber heutzutage können CSS-Animationen viel freier verwendet werden und die Syntax ist im Vergleich zu CSS-Features wie Grid oder Flexbox im Allgemeinen viel einfacher zu erlernen.

Es gibt verschiedene Funktionen, die Teil der CSS-Animationsspezifikation des W3C sind. Einige sind einfacher zu bedienen als andere. Dieses Tutorial zu CSS-Keyframe-Animationen geht durch die gesamte Syntax, einschließlich der verschiedenen Eigenschaften. Ich füge interaktive Demos hinzu, damit Sie verstehen, was mit CSS-Animationen möglich ist.

Die @keyframes-Syntax

Jede CSS-Animation besteht aus zwei Teilen: Einem oder mehreren animation-* -Eigenschaften zusammen mit einer Reihe von Animations-Keyframes, die mithilfe von definiert werden @keyframes at-Regel. Schauen wir uns im Detail an, was in den Aufbau von a einfließt @keyframes Regelsatz.

Die Syntax sieht so aus:

@keyframes moveObject {
  0% {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  100% {
    transform: translateX(300px) scale(1.5);
  }
}

Wie hier gezeigt, die @keyframes at-rule besteht aus drei grundlegenden Teilen:

• Die @keyframes Regel gefolgt von einem benutzerdefinierten Animationsnamen
• Eine Reihe von geschweiften Klammern, die alle Keyframes umschließen
• Ein oder mehrere Keyframes mit jeweils einem Prozentsatz, gefolgt von einem Regelsatz, umgeben von geschweiften Klammern

In diesem ersten Beispiel unseres CSS-Animations-Tutorials habe ich meine Animation mit dem Namen definiert moveObject. Dies kann ein beliebiger Name sein, Groß- und Kleinschreibung wird beachtet und muss eingehalten werden benutzerdefinierte Kennung Regeln in CSS. Dieser benutzerdefinierte Name muss mit dem Namen übereinstimmen, der in verwendet wird animation-name Eigentum (wird später besprochen).

In meinem Beispiel werden Sie feststellen, dass ich Prozentsätze verwendet habe, um jeden der Keyframes in meiner Animation zu definieren. Wenn meine Animation Keyframes enthält, die gleich sind 0% und 100%kann ich alternativ die verwenden from und to Schlüsselwörter:

@keyframes moveObject {
  from {
    transform: translateX(0);
  }

  50% {
     transform: translateX(300px);
  }

  to {
    transform: translateX(300px) scale(1.5);
  }
}

Der folgende interaktive CodePen verwendet die obige Syntax in einem Live-Beispiel:

In der Demo habe ich eine Schaltfläche eingefügt, die die Animation zurücksetzt. Warum das nötig ist, erkläre ich später. Aber vorerst sollten Sie wissen, dass diese Animation drei Keyframes enthält, die Schritte in dieser Animationssequenz darstellen: den Start, den 50 %-Schritt und das Ende (dh 0 %, 50 % und 100 %). Jeder von ihnen verwendet einen sogenannten Keyframe-Selektor zusammen mit geschweiften Klammern, um die Eigenschaften in diesem Schritt zu definieren.

Einige Dinge zu beachten @keyframes Syntax:

• Sie können die Keyframe-Regelsätze in beliebiger Reihenfolge anordnen, und der Browser führt sie weiterhin in der Reihenfolge aus, die durch ihren Prozentsatz bestimmt wird
• Sie können die 0 %- und 100 %-Keyframes weglassen, und der Browser bestimmt diese automatisch anhand der vorhandenen Stile auf dem animierten Element
• Wenn es doppelte Keyframes mit unterschiedlichen Regelsätzen gibt (z. B. zwei Keyframes für 20 % mit einem anderen Transformationswert), verwendet der Browser den letzten
• Sie können mehrere Keyframes in einem einzelnen Keyframe-Selektor mit einem Komma definieren: 10%, 30% { ... }
• Die !important Das Schlüsselwort hebt alle Eigenschaftswerte auf, sodass es nicht für eine Eigenschaft innerhalb eines Keyframe-Regelsatzes verwendet werden sollte

👉 Jetzt, da Sie ein gutes Verständnis für die haben @keyframes Lassen Sie uns in diesem CSS-Animations-Tutorial einen Blick auf die verschiedenen Animationseigenschaften werfen, die für das animierte Element definiert sind.

Die Animationseigenschaften, die wir behandeln werden:

Die Eigenschaft animation-name

Wie bereits erwähnt, muss jede von Ihnen erstellte CSS-Animation einen Namen haben, der in der @keyframes Syntax. Dieser Name muss derselbe Name sein, der mit dem definiert wurde animation-name Eigentum.

Unter Verwendung des CSS aus der vorherigen Demo sieht die Syntax folgendermaßen aus:

.box {
  animation-name: moveObject;
}

Auch hier muss der benutzerdefinierte Name, den ich definiert habe, auch als Name für a existieren @keyframes at-Regel – sonst wird dieser Name nichts tun. Sie können sich das wie a vorstellen Funktionsaufruf in JavaScript. Die Funktion selbst wäre die @keyframes moveObject {} Teil des Codes, während der Funktionsaufruf ist animation-name: moveObject.

Einige Dinge, die Sie beachten sollten animation-name:

• Der Anfangswert für animation-name ist none, was bedeutet, dass keine Keyframes aktiv sind. Dies kann als eine Art „Umschalter“ zum Deaktivieren einer Animation verwendet werden.
• Bei Ihrem gewählten Namen wird zwischen Groß- und Kleinschreibung unterschieden und er kann Buchstaben, Zahlen, Unterstriche und Bindestriche enthalten.
• Das erste Zeichen im Namen muss ein Buchstabe oder ein Bindestrich sein, jedoch nur ein einzelner Bindestrich.
• Der Name darf kein reserviertes Wort wie sein unset, initialoder inherit.

Die Eigenschaft animation-duration

Die animation-duration Die Eigenschaft definiert, keine Überraschung, die Zeit, die eine Animation benötigt, um einmal von Anfang bis Ende ausgeführt zu werden. Dieser Wert kann wie unten gezeigt in Sekunden oder Millisekunden angegeben werden:

.box {
  animation-duration: 2s;
}

Das Obige wäre das Äquivalent zu Folgendem:

.box {
  animation-duration: 2000ms;
}

Du kannst das … sehen animation-duration Eigenschaft in Aktion in der folgenden CodePen-Demo. In dieser Demo können Sie auswählen, wie lange die Animation dauern soll. Versuchen Sie, verschiedene Werte in Sekunden oder Millisekunden einzugeben, und verwenden Sie dann die Schaltfläche „Animate the Box“, um die Animation auszuführen.

Wenn Sie eine kleine Zahl zusammen mit verwenden ms für das Gerät bemerken Sie möglicherweise nicht einmal eine Bewegung. Versuchen Sie, eine höhere Zahl einzustellen, wenn Sie Millisekunden verwenden.

Einige Hinweise zur Verwendung animation-duration:

• Negative Werte sind ungültig
• Die Einheit muss enthalten sein, auch wenn die Dauer auf eingestellt ist 0s (der Anfangswert)
• Sie können Bruchwerte verwenden (z. B. 0.8s)

Die Eigenschaft animation-timing-function

Die animation-timing-function, die in ihrer Bedeutung nicht so offensichtlich ist wie die beiden vorherigen Eigenschaften, wird verwendet, um die Art und Weise zu definieren, in der die CSS-Animation fortschreitet. Das ist vielleicht nicht die klarste Erklärung, aber die Syntax könnte zur Klärung beitragen.

Die Deklaration sieht so aus:

.box {
  animation-timing-function: linear;
}

Diese Eigenschaft akzeptiert die folgenden Schlüsselwortwerte:

• ease (der Anfangswert)
• ease-in
• ease-out
• ease-in-out
• linear
• step-start
• step-end

Die meisten Werte sind anhand ihrer Namen relativ einfach zu verstehen, aber Sie können anhand der folgenden interaktiven Demo sehen, wie sie sich unterscheiden:

Verwenden Sie die Auswahleingabe, um einen der sieben Schlüsselwortwerte auszuwählen. Notiere dass der ease-* Werte erleichtern die Animation auf verschiedene Weise. Ein linearer Wert ist durchgehend konsistent.

Die animation-timing-function Die Eigenschaft akzeptiert auch die folgenden Funktionen:

• cubic-bezier() – Akzeptiert als Argumente vier Zahlenwerte, getrennt durch Kommas
• steps() – Akzeptiert als Argumente zwei Werte, eine Zahl und einen „Sprungbegriff“, getrennt durch ein Komma

Die Schlüsselwortwerte step-start und step-end entsprechen den Werten steps(1, jump-start) und steps(1, jump-end)bzw.

Wie für cubic-bezier()kann Ihnen die folgende interaktive Demo dabei helfen, die Funktion etwas besser zu verstehen:

Beachten Sie, dass Sie in der Demo die vier Argumente in der festlegen können cubic-bezier() Funktion. Zwei der Argumente können negativ sein, und zwei sind auf Dezimalwerte zwischen 0 und 1 beschränkt. Eine anständige Erklärung, wie diese Arten von Timing-Funktionen funktionieren, finden Sie unter Dieser Artikel oder dieses interaktive Tool.

Die steps() Die Funktion hingegen akzeptiert zwei Argumente:

• Eine Ganzzahl, die gleiche „Stopps“ entlang eines einzelnen Zyklus der Animation darstellt.
• Ein optionales Schlüsselwort namens „Jumpterm“, das bestimmt, ob die Animation in bestimmten Intervallen „hält“.

Auch hier soll Ihnen eine interaktive Demo helfen zu verstehen, wie diese Sprungbegriffe funktionieren:

Versuchen Sie, eine ganze Zahl zusammen mit einem Sprungbegriff auszuwählen (oder versuchen Sie es ohne Sprungbegriff), um zu sehen, wie sich die verschiedenen Schlüsselwörter mit unterschiedlichen ganzzahligen Werten unterscheiden. Anscheinend sind negative Ganzzahlen erlaubt, aber ich sehe keinen Unterschied zwischen 0 und einem negativen Wert.

Die Eigenschaft animation-iteration-count

In einigen Fällen werden Sie zufrieden sein, wenn eine Animation einmal ausgeführt wird, aber manchmal möchten Sie, dass eine Animation mehrmals ausgeführt wird. Die animation-iteration-count -Eigenschaft können Sie dies tun, indem Sie eine positive Zahl akzeptieren, die angibt, wie oft die Animation ausgeführt werden soll:

.box {
  animation-iteration-count: 3;
}

Der Anfangswert für animation-iteration-count ist 1 Sie können aber auch das Schlüsselwort verwenden infinite (selbsterklärend) oder einen Bruchwert verwenden. Ein Bruchwert führt die Animation beim Bruchteillauf teilweise durch:

.box {
  animation-iteration-count: 3.5;
}

Der obige Code durchläuft die Animation dreieinhalb Mal. Das heißt, drei vollständige Iterationen, gefolgt von einer letzten Iteration, die genau auf halbem Weg stoppt.

Diese Eigenschaft ist am nützlichsten, wenn sie in Verbindung mit verwendet wird animation-direction Eigenschaft (wird als nächstes besprochen), da eine Animation, die nur von Anfang an läuft, nicht sehr nützlich ist, wenn sie mehr als einmal läuft.

Sie können die folgende Demo ausprobieren, mit der Sie einen Bruchwert für die Iterationsanzahl auswählen können, damit Sie den Effekt sehen können:

Die Eigenschaft animation-direction

Wie oben in diesem CSS-Animations-Tutorial erwähnt, ist die animation-direction Eigenschaft funktioniert gut in Verbindung mit animation-iteration-count. Die animation-direction -Eigenschaft können Sie festlegen, in welche Richtung die Animation abgespielt werden soll. Die Syntax sieht so aus:

.box {
  animation-direction: alternate;
}

Sie können den Wert als eines von vier Schlüsselwörtern festlegen:

• normal – Die Animation wird bei der ersten Iteration vorwärts abgespielt (Standardeinstellung).
• reverse – Die Animation wird bei der ersten Iteration rückwärts abgespielt
• alternate – Die Animation wird bei der ersten Iteration vorwärts abgespielt und wechselt dann bei nachfolgenden Iterationen
• alternate-reverse – Gleich wie alternate spielt aber bei der ersten Iteration rückwärts

Sie können die verschiedenen Werte mit unterschiedlichen Iterationszahlen mithilfe der interaktiven Demo unten ausprobieren:

Die Eigenschaft animation-play-state

Die animation-play-state -Eigenschaft ist in einer statischen CSS-Umgebung nicht sehr nützlich, kann aber nützlich sein, wenn Sie Animationen schreiben, die über JavaScript oder sogar CSS interaktiv sind.

Diese Eigenschaft akzeptiert zwei Werte: running oder paused:

.box {
  animation-direction: paused;
}

Standardmäßig befindet sich jede gegebene Animation im Zustand „läuft“. Aber Sie können JavaScript verwenden, um den Wert der Eigenschaft umzuschalten. Sie könnten sogar eine interaktive CSS-Funktion wie verwenden :hover oder :focus um die Animation in einen „angehaltenen“ Zustand zu versetzen, wodurch die Animation im Wesentlichen eingefroren wird, wo immer sie sich in der aktuellen Iteration befindet.

Die interaktive Demo unten hat eine Animation, die unendlich läuft, mit zwei Schaltflächen zum „Pausieren“ und „Fortsetzen“ der Animation.

Die animation-delay-Eigenschaft

Einige Animationen sind so konzipiert, dass sie sofort mit der Animation beginnen, während andere von einer leichten Verzögerung vor der ersten Iteration profitieren könnten. Die animation-delay Eigenschaft ermöglicht es Ihnen, dies zu erreichen.

.box {
  animation-delay: 4s;
}

Wie andere zeitbasierte Werte können Sie die festlegen animation-delay zu einem Wert in Sekunden oder Millisekunden. Sie können auch Bruchwerte verwenden.

Es ist wichtig zu beachten, dass die Verzögerung nur bei der ersten Iteration auftritt, nicht bei jeder Iteration. Sie können dies mit der interaktiven Demo unten ausprobieren:

Die Demo bietet Ihnen die Möglichkeit, sowohl den Iterationswert als auch die Verzögerung zu ändern, sodass Sie sehen können, dass die Verzögerung keine nachfolgenden Iterationen beeinflusst – nur die erste.

Eine interessante Möglichkeit, diese Eigenschaft zu verwenden, ist ein negativer Wert. Versuchen Sie beispielsweise, mithilfe der obigen Demo die Einstellung animation-delay zu -0.5s. Sie werden feststellen, dass die negative Verzögerung fast so funktioniert, als würden Sie in einer Zeitmaschine vorwärts gehen – die Animation beginnt eher auf halber Strecke als am Anfang.

Die Eigenschaft animation-fill-mode

Die letzte Longhand-Eigenschaft, die ich in diesem CSS-Animations-Tutorial behandeln werde, ist eine, die ich in der vorherigen Demo verwendet habe. Sie werden feststellen, dass die Box dort bleibt, wo sie ist, wenn die Animation die letzte Iteration stoppt. Dies wird mit erreicht animation-fill-mode.

.box {
  animation-fill-mode: forwards;
}

Diese Eigenschaft legt fest, wie eine Animation vor und nach ihrer Ausführung Stile auf das Zielelement anwendet. Das ist konzeptionell etwas schwer zu verstehen, also werde ich die Bedeutung jedes Werts behandeln; Anschließend können Sie die Werte mithilfe der interaktiven Demo vergleichen.

Diese Eigenschaft akzeptiert die folgenden vier Schlüsselwortwerte:

• none – Standardmäßig werden keine Stile vor oder nach der Ausführung angewendet
• forwards – Behält alle im letzten Schlüsselbild der Animation angewendeten Stile bei
• backwards – Mehr oder weniger das Gegenteil des vorherigen Werts, es behält die auf die Animation angewendeten Stile bei, sobald es mit der Ausführung beginnt, aber bevor die Animation beginnt
• both – Behält Stile für beide bei forwards und backwards

Die letzte Demo in diesem CSS-Animations-Tutorial wird die Dinge ein wenig klarer machen, aber diese kann eine Menge Herumspielen erfordern, bevor Sie wirklich verstehen, was sie tut und wie sie es erreicht.

Der Einfachheit halber habe ich alle Demos hinzugefügt eine einzelne CodePen-Sammlung.

Sie werden feststellen, dass Sie in der Demo den Füllmodus, die Verzögerung, die Richtung und die Anzahl der Iterationen anpassen können, da sich all dies auf das Erscheinungsbild auswirken kann. Außerdem habe ich der animierten Box im ersten Keyframe eine andere Hintergrundfarbe hinzugefügt, was wiederum dazu beiträgt, die Füllmoduswerte etwas klarer zu machen. Wenn Sie immer noch nicht ganz verstehen, wie animation-fill-mode funktioniert, können Sie überprüfen ein älterer Artikel Ich habe geschrieben, dass diskutiert animation-fill-mode ausführlich.

Die Animations-Kurzschrifteigenschaft

Ich habe in diesem CSS-Animations-Tutorial für Anfänger acht verschiedene Eigenschaften behandelt, und ich ermutige Sie, die lange Hand zu verwenden. Dadurch können Sie die explizit festgelegten Werte leichter erkennen.

Sobald Sie ein gutes Verständnis für jede der Eigenschaften haben, haben Sie die Möglichkeit, die zu verwenden animation shorthand-Eigenschaft, mit der Sie alle longhand-Eigenschaften in einer einzigen Deklaration definieren können.

.box {
  animation: moveObject 2s ease-in-out 3 reverse running 1.3s forwards;
}

Ganz ehrlich, das sind eine Menge Informationen in einer einzigen Zeile. Ich würde empfehlen, die Kurzschrift zu verwenden, wenn die Deklaration nicht alle Eigenschaften enthält, sondern vielleicht nur drei oder vier davon.

Wenn Sie die Kurzschrift verwenden, können Sie die Werte in beliebiger Reihenfolge anordnen, beachten Sie jedoch die folgenden Regeln:

• Der erste Wert, der die Zeit definiert, ist der animation-duration; jeder nachfolgende Zeitwert ist der animation-delay.
• Wenn es einen Konflikt zwischen einem Schlüsselwort und der animation-namehat der Schlüsselwortwert Vorrang, wenn er zuerst erscheint.
• Alle ausgelassenen Werte werden auf ihren Anfangszustand zurückgesetzt, wie bei jeder CSS-Kurzschrifteigenschaft.

Anwenden mehrerer Animationen auf ein einzelnes Element

Ein letztes Feature, das Sie beachten sollten, ist, dass Sie die Möglichkeit haben, mehrere Animationen auf ein einzelnes Objekt anzuwenden, indem Sie die Animationen durch Kommas trennen.

Hier ist ein Beispiel mit der Kurzschrift:

.box {
  animation: moveObject 2s ease-in-out, fadeBox 3s linear;
}

Hier habe ich zwei verschiedene Animationen definiert, die zwei verschiedenen Sätzen von Keyframes zugeordnet sind, aber auf dasselbe Objekt angewendet werden. Derselbe Code könnte in Langschrift geschrieben werden als:

.box {
  animation-name: moveObject, fadeBox;
  animation-duation: 2s, 3s;
  animation-timing-function: ease-in-out, linear;
}

Beachten Sie, dass jede Eigenschaft zwei durch Kommas getrennte Werte enthält. In diesem Fall wäre die Kurzschrift mit ziemlicher Sicherheit einfacher zu lesen und zu pflegen.

Abschluss dieses CSS-Animations-Tutorials

👉 Eine letzte Warnung: Verwenden Sie Animationen in Maßen und denken Sie daran, dass einige Webbenutzer durch blinkende Farben und andere sich schnell bewegende Objekte negativ beeinflusst werden könnten.