Animationen sind eine hervorragende Möglichkeit, interaktive Elemente hervorzuheben und Ihre Designs interessanter und unterhaltsamer zu gestalten. In diesem Modul erfahren Sie, wie Sie Animationseffekte mit CSS hinzufügen und steuern.
Manchmal werden auf Oberflächen kleine Hilfen angezeigt, die nützliche Informationen zu dem Bereich liefern, in dem sie sich befinden. Sie enthalten oft eine pulsierende Animation, die Sie auf subtile Weise darüber informiert, dass die Informationen vorhanden sind und mit denen interagiert werden sollte. In diesem Modul erfahren Sie, wie Sie diese Hilfsfunktionen und andere Animationen mithilfe von CSS erstellen.
Sie können CSS verwenden, um eine Animationssequenz mit Keyframes festzulegen. Diese Sequenzen können einfache Ein-Zustand-Animationen oder komplexe, zeitbasierte Sequenzen sein.
Was ist ein Keyframe?
In den meisten Animationstools sind Keyframes der Mechanismus, mit dem Sie Zeitstempeln auf einer Zeitachse Animationsstatus zuweisen.
Hier sehen Sie als Beispiel eine Zeitachse für den pulsierenden „Hilfspunkt“. Die Animation läuft 1 Sekunde lang und hat 2 Zustände.
Jeder dieser Animationsstatus beginnt und endet jeweils an einem bestimmten Punkt. Diese bilden Sie mithilfe von Keyframes auf der Zeitachse ab.
@keyframes
CSS-Elemente @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), der Name der Keyframe-Regel. Die Kennung in diesem Beispiel lautet my-animation.
Die benutzerdefinierte Kennung funktioniert wie ein Funktionsname, sodass Sie an anderer Stelle im CSS-Code auf die Keyframe-Regel verweisen können.
Innerhalb der Keyframe-Regel sind from und to Keywords, die 0% und 100% darstellen, die den Anfang und das Ende der Animation darstellen.
Sie könnten die gleiche Regel wie folgt neu erstellen:
@keyframes my-animation {
0% {
transform: translateY(20px);
}
100% {
transform: translateY(0px);
}
}
Sie können innerhalb des Zeitraums beliebig viele Positionen hinzufügen. Im pulsierenden Beispiel des Hilfsprogramms gibt es zwei Zustände, die in zwei Keyframes übersetzt werden. Das bedeutet, dass es zwei Positionen innerhalb der Keyframe-Regel gibt, an denen die Änderungen für jeden dieser Keyframes dargestellt werden.
@keyframes pulse {
0% {
opacity: 0;
}
50% {
transform: scale(1.4);
opacity: 0.4;
}
}
pulse, um zu sehen, wie sich die Animation ändert.Die animation-Attribute
Wenn Sie @keyframes in einer CSS-Regel verwenden möchten, können Sie entweder verschiedene Animationseigenschaften einzeln definieren oder die Kurzform animation verwenden.
animation-duration
.my-element {
animation-duration: 10s;
}
Die Eigenschaft animation-duration definiert, wie lang die @keyframes-Zeitachse als Zeitwert sein soll.
Die Standardeinstellung ist 0 Sekunden, was bedeutet, dass die Animation zwar weiter läuft, aber zu schnell ist, um Sie zu sehen. Negative Zeitwerte sind nicht zulässig.
animation-timing-function
Um natürliche Bewegungen in Animationen nachzubilden, können Sie Zeitfunktionen verwenden, die die Geschwindigkeit einer Animation an jedem Punkt berechnen. Berechnete Werte sind häufig gekrümmt, wodurch die Animation mit variablen Geschwindigkeiten im Verlauf von animation-duration ausgeführt wird und das Element so aussieht, als würde es abspringen, wenn der Browser einen Wert berechnet, der über den in @keyframes definierten Wert hinausgeht.
In CSS sind mehrere Schlüsselwörter als Voreinstellungen verfügbar, die als Wert für animation-timing-function verwendet werden: linear, ease, ease-in, ease-out, ease-in-out.
.my-element {
animation-timing-function: ease-in-out;
}
Easing-Funktionswerte wirken wie eine Kurve, da das Easing mithilfe einer Bézier-Kurve berechnet wird. Dies ist eine Art von Funktion zur Modellierung der Geschwindigkeit. Jedes der Keywords für die Zeitfunktion, z. B. ease, verweist auf eine vordefinierte Bézier-Kurve. In CSS können Sie eine Bézier-Kurve direkt mit der Funktion cubic-bezier() definieren, die vier Zahlenwerte akzeptiert: x1, y1, x2, y2.
.my-element {
animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}
Mit diesen Werten wird jeder Teil der Kurve entlang der X- und der Y-Achse dargestellt.
Bézier-Kurven zu verstehen, ist kompliziert. Visuelle Tools wie dieser Generator von Lea Verou sind sehr hilfreich.
Die Easing-Funktion steps
Manchmal möchten Sie die Animation besser steuern, indem Sie sich in Intervallen statt entlang einer Kurve bewegen. Mit der Easing-Funktion steps() können Sie die Zeitachse 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 gleiche Anzahl von Keyframes wie die Schritte vorliegt, wird jeder Keyframe für die genaue Dauer des jeweiligen Schritts nacheinander abgespielt, ohne dass der Übergang zwischen den Status erfolgt. Wenn weniger Keyframes als Schritte vorhanden sind, fügt der Browser abhängig vom zweiten Argument Schritte zwischen den Keyframes hinzu.
Das zweite Argument ist die Richtung. Wenn sie auf end (Standardeinstellung) gesetzt ist, enden die Schritte am Ende der Zeitachse. Wenn sie auf start gesetzt ist, wird der erste Schritt der Animation mit dem Start abgeschlossen. Das bedeutet, dass sie einen Schritt vor end endet.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
Die Eigenschaft animation-iteration-count definiert, wie oft die Zeitachse @keyframes während der Animation ausgeführt werden soll. Der Standardwert ist 1, was bedeutet, dass die Animation stoppt, wenn das Ende der Zeitachse erreicht ist. Dieser Wert darf keine negative Zahl sein.
Wenn die Animation als Schleife wiedergegeben werden soll, setzen Sie die Anzahl der Iterationen auf infinite. So funktioniert die pulsierende Animation zu Beginn dieser Lektion.
animation-direction
.my-element {
animation-direction: reverse;
}
Mit animation-direction können Sie festlegen, in welche Richtung die Zeitachse über Ihren Keyframes verläuft. Dafür stehen folgende Werte zur Verfügung:
normal: der Standardwert für die Weiterleitung.reverse: läuft über die Zeitachse rückwärts.alternate: Bei jedem Animationsdurchlauf wechselt die Zeitachse zwischen Vorwärts- und Rückwärtslauf.alternate-reverse: Wiealternate, aber die Animation beginnt mit einer rückwärtslaufenden Zeitachse.
animation-delay
.my-element {
animation-delay: 5s;
}
Die Eigenschaft animation-delay legt fest, wie lange der Browser wartet, bevor die Animation gestartet wird.
Wie für das Attribut animation-duration ist auch hier ein Zeitwert erforderlich.
Im Gegensatz zu animation-duration können Sie animation-delay als negativen Wert definieren. Die Animation startet dann am entsprechenden Punkt auf der Zeitachse. Wenn Ihre Animation beispielsweise 10 Sekunden lang ist und Sie animation-delay auf -5s festlegen, beginnt die Animation bei der Hälfte der Zeitleiste.
animation-play-state
.my-element:hover {
animation-play-state: paused;
}
Mit der Eigenschaft animation-play-state können Sie die Animation abspielen und pausieren.
Der Standardwert ist running. Wenn Sie paused festlegen, wird die Animation pausiert.
animation-fill-mode
Mit der Eigenschaft animation-fill-mode wird definiert, welche Werte auf der @keyframes-Zeitachse der Animation angezeigt werden, bevor sie beginnt oder endet. Der Standardwert ist none. Das bedeutet, dass nach Abschluss der Animation die Werte auf der Zeitachse verworfen werden.
Weitere Optionen:
forwards: Der letzte Keyframe wird entsprechend der Animationsrichtung beibehalten.backwards: Der erste Keyframe bleibt abhängig von der Animationsrichtung erhalten.both: Der erste und der letzte Keyframe bleiben bestehen.
Die Abkürzung animation
Anstatt jede Eigenschaft separat zu definieren, können Sie sie in einem animation-Kurzschreiben definieren, wodurch Sie die Animationseigenschaften in der folgenden Reihenfolge definieren können:
animation-nameanimation-durationanimation-timing-functionanimation-delayanimation-iteration-countanimation-directionanimation-fill-modeanimation-play-state
.my-element {
animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}
Überlegungen beim Arbeiten mit Animationen
Nutzer können ihr Betriebssystem so einstellen, dass bei der Interaktion mit Anwendungen und Websites reduzierte Bewegungen bevorzugt werden. Sie können diese Einstellung mit der Medienabfrage prefers-Reduced-motion ermitteln:
@media (prefers-reduced-motion) {
.my-autoplaying-animation {
animation-play-state: paused;
}
}
Dies bedeutet nicht unbedingt, dass keine Animation empfohlen werden soll. Es sollte weniger Animationen, vor allem weniger unerwartete Animationen, Weitere Informationen zu dieser Präferenz und Gesamtleistung finden Sie in unserer Animationsanleitung.
Wissen testen
Testen Sie Ihr Wissen über Animationen
Wird beim Namen oder der benutzerdefinierten Kennung einer @keyframes-Animation zwischen Groß- und Kleinschreibung unterschieden?
SWOOP und swoop dürfen aber gleichzeitig vorhanden sein.Die Keywords from und to sind identisch mit:
end und start.100% und 0%.from ist mit 0% und to mit 100 % identisch.0 und 1Der animation-timing-function ist auch bekannt als:
Wie viele Keyframes sind in einer @keyframes-Animation mindestens erforderlich?