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: Eine oder mehrere animation-* -Eigenschaften zusammen mit einer Reihe von Animations-Keyframes, die mit der @keyframes at-Regel definiert werden. Schauen wir uns im Detail an, was zum Erstellen eines @keyframes Regelsatzes gehört.

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, enthält die @keyframes at-Regel drei grundlegende Teile:

• 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 moveObject definiert. Dies kann ein beliebiger Name sein, Groß- und Kleinschreibung muss beachtet werden und die Regeln für benutzerdefinierte Bezeichner in CSS müssen eingehalten werden. Dieser benutzerdefinierte Name muss mit dem Namen übereinstimmen, der in der Eigenschaft animation-name verwendet wird (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 0% und 100% entsprechen, kann ich alternativ die Schlüsselwörter from und to verwenden:

 @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, die zur @keyframes Syntax zu beachten sind:

• 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% ...
• Das Schlüsselwort !important annulliert jeden Eigenschaftswert, sodass es nicht für eine Eigenschaft innerhalb eines Keyframe-Regelsatzes verwendet werden sollte

Nachdem Sie nun die @keyframes Syntax in diesem CSS-Animations-Tutorial gut verstanden haben, werfen wir einen Blick auf die verschiedenen Animationseigenschaften, 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 erscheint. Dieser Name muss derselbe Name sein, der mit der Eigenschaft animation-name definiert wurde.

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 eine @keyframes at-Regel existieren – sonst wird dieser Name nichts tun. Sie können sich das wie einen Funktionsaufruf in JavaScript vorstellen. Die Funktion selbst wäre der Teil @keyframes moveObject des Codes, während der Funktionsaufruf animation-name: moveObject .

Einige Dinge, die Sie bei animation-name beachten sollten:

• 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 unset , initial oder inherit sein.

Die Eigenschaft animation-duration

Die Eigenschaft animation-duration 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;

In der folgenden CodePen-Demo können Sie die Eigenschaft animation-duration in Aktion sehen. 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 ms für die Einheit verwenden, bemerken Sie möglicherweise nicht einmal eine Bewegung. Versuchen Sie, eine höhere Zahl einzustellen, wenn Sie Millisekunden verwenden.

Einige Hinweise zur Verwendung von animation-duration :

• Negative Werte sind ungültig
• Die Einheit muss enthalten sein, auch wenn die Dauer auf 0s (den Anfangswert) eingestellt ist.
• 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. Beachten Sie, dass die ease-* -Werte die Animation auf verschiedene Weise „erleichtern“. Ein linearer Wert ist durchgehend konsistent.

Die Eigenschaft animation-timing-function 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) bzw. steps(1, jump-end) .

Wie cubic-bezier() , hilft Ihnen die folgende interaktive Demo vielleicht dabei, die Funktion etwas besser zu verstehen:

Beachten Sie, dass Sie in der Demo die vier Argumente in der Funktioncubic cubic-bezier() können. Zwei der Argumente können negativ sein, und zwei sind auf Dezimalwerte zwischen 0 und 1 beschränkt. Für eine anständige Erklärung, wie diese Arten von Timing-Funktionen funktionieren, können Sie diesen Artikel oder dieses interaktive Tool lesen.

Die Funktion steps() 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. Mit der Eigenschaft animation-iteration-count 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 , aber Sie können auch das Schlüsselwort 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 der Eigenschaft animation-direction verwendet wird (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 Tutorial zu CSS-Animationen erwähnt, funktioniert die Eigenschaft animation-direction gut in Verbindung mit animation-iteration-count . Mit der Eigenschaft animation-direction 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 (Standard)
• 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 – Dasselbe wie alternate , wird aber bei der ersten Iteration rückwärts abgespielt

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

Die Eigenschaft animation-play-state

Die Eigenschaft animation-play-state 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 :hover oder :focus verwenden, 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. Mit der Eigenschaft animation-delay können Sie dies erreichen.

 .box animation-delay: 4s;

Wie andere zeitbasierte Werte können Sie die animation-delay auf einen Wert in Sekunden oder Millisekunden festlegen. 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 animation-delay auf -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 animation-fill-mode erreicht.

 .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 die Umkehrung 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 forwards und backwards bei

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 in einer einzigen CodePen-Sammlung zusammengefasst.

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 verstanden haben, wie animation-fill-mode funktioniert, können Sie sich einen älteren Artikel ansehen, den ich geschrieben habe und der den animation-fill-mode ausführlich behandelt.

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 alle Eigenschaften gut verstanden haben, haben Sie die Möglichkeit, die animation -Kurzschrifteigenschaft zu verwenden, mit der Sie alle Langschrifteigenschaften 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 die animation-duration ; jeder nachfolgende Zeitwert ist die animation-delay .
• Wenn es einen Konflikt zwischen einem Schlüsselwort und dem animation-name gibt, hat 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.