The CSS Podcast – 022: Animation
Manchmal sehen Sie auf Benutzeroberflächen kleine Hilfen, die beim Klicken nützliche Informationen zu diesem bestimmten Bereich liefern. Diese haben oft eine pulsierende Animation, um Sie dezent darauf hinzuweisen, dass die Informationen vorhanden sind und Sie mit ihnen interagieren sollten. In diesem Modul erfahren Sie, wie Sie diese Helfer und andere Animationen mit CSS erstellen.
Mit CSS können Sie eine Animationssequenz mit Keyframes festlegen. Diese Sequenzen können einfache, einstufige Animationen oder komplexe, zeitbasierte Sequenzen sein.
Was ist ein Keyframe?
In den meisten Animationstools werden mithilfe von Keyframes Zeitstempeln auf einer Zeitachse Animationsstatus zugewiesen.
Hier ist beispielsweise eine Zeitleiste für den pulsierenden „Hilfepunkt“. Die Animation dauert eine Sekunde und hat zwei Zustände.
Jeder dieser Animationsstatus beginnt und endet an einem bestimmten Punkt. Diese legen Sie auf der Zeitachse mit Keyframes fest.
@keyframes
CSS-@keyframes
-Keyframes basieren auf demselben Konzept wie Animations-Keyframes.
Hier ein Beispiel mit zwei Status:
@keyframes my-animation {
from {
transform: translateY(20px);
}
to {
transform: translateY(0px);
}
}
Der erste wichtige Teil ist die benutzerdefinierte Kennung (custom-ident
), also der Name der ‑regel. In diesem Beispiel lautet die Kennung my-animation
.
Die benutzerdefinierte Kennung funktioniert wie der Name einer Funktion. So können Sie die keyframes-Regel an anderer Stelle in Ihrem CSS-Code referenzieren.
In der Keyframe-Regel sind from
und to
Keywords, die 0%
und 100%
repräsentieren, also den Anfang und das Ende der Animation.
Sie können dieselbe Regel so neu erstellen:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
Sie können dem Zeitraum beliebig viele Positionen hinzufügen. Im Beispiel für das Pulsieren gibt es zwei Status, die in zwei ‑keyframes übersetzt werden. Das bedeutet, dass du in deiner Keyframe-Regel zwei Positionen hast, um die Änderungen für jeden dieser Keyframes darzustellen.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
Die animation
-Properties
Wenn Sie @keyframes
in einer CSS-Regel verwenden möchten, können Sie entweder verschiedene Animationseigenschaften einzeln definieren oder die Kurzschreibweise animation
verwenden.
animation-duration
.my-element {
animation-duration: 10s;
}
Mit der Eigenschaft animation-duration wird festgelegt, wie lang die @keyframes
-Zeitachse sein soll.
Der Standardwert ist 0 Sekunden. Das bedeutet, dass die Animation zwar ausgeführt wird, aber zu schnell, um sie zu sehen. Negative Zeitwerte sind nicht zulässig.
animation-timing-function
Um natürliche Bewegungen in der Animation nachzubilden, können Sie Timing-Funktionen verwenden, mit denen die Geschwindigkeit einer Animation an jedem Punkt berechnet wird. Berechnete Werte sind oft gekrümmt, wodurch die Animation im Laufe von animation-duration
mit variabler Geschwindigkeit ausgeführt wird und das Element zu hüpfen scheint, wenn der Browser einen Wert berechnet, der über die in @keyframes
definierten hinausgeht.
In CSS sind mehrere Keywords als Voreinstellungen verfügbar, die als Wert für animation-timing-function verwendet werden: linear
, ease
, ease-in
, ease-out
und ease-in-out
.
.my-element {
animation-timing-function: ease-in-out;
}
Die Werte der Ease-Funktion erscheinen gekrümmt, weil die Ease-Funktion mit einer Bézierkurve berechnet wird, einer Funktion, mit der die Geschwindigkeit modelliert wird. Jedes der Keywords für Timingfunktionen wie ease
verweist auf eine vordefinierte Bézierkurve. In CSS können Sie eine Bézierkurve direkt mit der Funktion cubic-bezier()
definieren, die vier Zahlenwerte akzeptiert: x1
, y1
, x2
und y2
.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
Anhand dieser Werte wird jeder Teil der Kurve entlang der X- und Y-Achse dargestellt.
Bézierkurven sind kompliziert. Visuelle Tools wie dieser Generator von Lea Verou sind sehr hilfreich.
Die steps
-Funktion
Manchmal möchten Sie die Animation detaillierter steuern, indem Sie sie in Intervallen statt entlang einer Kurve bewegen. Mit der steps()
-Funktion können Sie die Zeitleiste in definierte Intervalle mit gleicher Dauer unterteilen.
.my-element {
animation-timing-function: steps(10, end);
}
Das erste Argument ist die Anzahl der Schritte. Wenn die Anzahl der Frames der Anzahl der Schritte entspricht, wird jeder Frame nacheinander für genau die Dauer des jeweiligen Schritts abgespielt, ohne Übergang zwischen den Zuständen. Wenn es weniger Keyframes als Schritte gibt, fügt der Browser je nach zweitem Argument Schritte zwischen den Keyframes hinzu.
Das zweite Argument ist die Richtung. Wenn es auf end
festgelegt ist (Standardeinstellung), werden die Schritte am Ende des Zeitplans abgeschlossen. Wenn der Wert auf start
festgelegt ist, wird der erste Schritt der Animation sofort nach dem Start abgeschlossen. Das bedeutet, dass er einen Schritt früher als bei end
endet.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
Mit dem Attribut animation-iteration-count wird festgelegt, wie oft die Zeitachse @keyframes
während der Animation ausgeführt werden soll. Standardmäßig ist das „1“. Das bedeutet, dass die Animation anhält, wenn sie das Ende der Zeitachse erreicht. Dieser Wert darf keine negative Zahl sein.
Wenn die Animation in einer Schleife abgespielt werden soll, legen Sie die Wiederholungszahl auf infinite
fest. So funktioniert die pulsierende Animation vom Anfang dieser Lektion.
animation-direction
.my-element {
animation-direction: reverse;
}
Mit animation-direction können Sie festlegen, in welche Richtung die Zeitachse über Ihre Keyframes läuft. Dabei sind folgende Werte zulässig:
normal
: Der Standardwert ist „Vorwärts“.reverse
: läuft rückwärts über die Zeitachse.alternate
: Bei jeder Iteration der Animation wird die Zeitleiste abwechselnd vor- und rückwärts abgespielt.alternate-reverse
: Ähnlich wiealternate
, aber die Animation beginnt mit der Rückwärtswiedergabe der Zeitachse.
animation-delay
.my-element {
animation-delay: 5s;
}
Mit der Property animation-delay wird festgelegt, wie lange der Browser wartet, bevor die Animation gestartet wird.
Wie bei der Eigenschaft animation-duration
ist auch hier ein Zeitwert zulässig.
Im Gegensatz zu animation-duration
können Sie animation-delay
als negativen Wert definieren, wodurch die Animation am entsprechenden Punkt in der Zeitachse beginnt. Wenn Ihre Animation beispielsweise 10 Sekunden lang ist und Sie animation-delay
auf -5s
festlegen, beginnt die Animation in der Mitte der Zeitleiste.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
Mit der Eigenschaft animation-play-state können Sie die Animation wiedergeben und pausieren.
Der Standardwert ist running
. Wenn Sie den Wert auf paused
festlegen, wird die Animation pausiert.
animation-fill-mode
Mit der Eigenschaft animation-fill-mode wird festgelegt, welche Werte in der @keyframes
-Zeitachse vor Beginn oder nach Ende der Animation beibehalten werden. Der Standardwert ist none
. Das bedeutet, dass die Werte in der Zeitleiste nach Abschluss der Animation verworfen werden.
Weitere Optionen:
forwards
: Der letzte Keyframe bleibt basierend auf der Richtung der Animation erhalten.backwards
: Der erste Keyframe bleibt je nach Animationsrichtung erhalten.both
: Sowohl der erste als auch der letzte ‑Frame bleiben erhalten.
Die Kurzschreibweise für animation
Anstatt jede Eigenschaft separat zu definieren, können Sie sie in einer animation
-Kurzschreibweise definieren. So können Sie die Animationen in der folgenden Reihenfolge definieren:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
animation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
Hinweise zur Arbeit mit Animationen
Nutzer können ihr Betriebssystem so einstellen, dass weniger Bewegungen bei der Interaktion mit Anwendungen und Websites bevorzugt werden. Sie können diese Einstellung mit der Medienabfrage prefers-reduced-motion erkennen:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Das bedeutet nicht unbedingt, dass keine Animationen verwendet werden sollen. Nutzer bevorzugen weniger Animationen, insbesondere weniger unerwartete Animationen. Weitere Informationen zu dieser Einstellung und zur Gesamtleistung finden Sie in unserem Leitfaden zu Animationen.
Wissen testen
Ihr Wissen zu Animationen testen
Muss bei der Bezeichnung oder benutzerdefinierten Kennung einer @keyframes
-Animation die Groß- und Kleinschreibung beachtet werden?
Die Keywords from
und to
sind mit folgenden Keywords identisch:
0
und 1
0%
und 100%
.start
und end
.Die animation-timing-function
wird auch als
Wie viele Frames sind für eine @keyframes
-Animation mindestens erforderlich?