Animationen

Animationen eignen sich hervorragend, um interaktive Elemente hervorzuheben und Ihre Designs interessanter und unterhaltsamer zu machen. In diesem Modul erfahren Sie, wie Sie Animationseffekte mit CSS hinzufügen und steuern.

Manchmal werden auf Oberflächen kleine Hilfselemente angezeigt, die nützliche Informationen zum jeweiligen Abschnitt enthalten. Sie haben oft eine pulsierende Animation, um Sie zu signalisieren, dass die Informationen vorhanden sind und mit denen interagiert werden sollte. Wie funktioniert das mit CSS?

In CSS können Sie diese Art von Animation mithilfe von CSS-Animationen erstellen. Dabei können Sie mithilfe von Keyframes eine Animationssequenz festlegen. Animationen können einfache Einzustandsanimationen oder sogar komplexe, zeitbasierte Sequenzen sein.

Was ist ein Keyframe?

In Animationssoftware, CSS und den meisten anderen Tools, mit denen Sie etwas animieren können, sind Keyframes der Mechanismus, mit dem Sie Zeitstempeln auf einer Zeitachse einen Animationsstatus zuweisen können.

Verwenden wir den „pulser“ als Kontext dafür. Die gesamte Animation läuft 1 Sekunde lang und über 2 Zustände.

Jeder dieser Animationsstatus beginnt und endet an einem bestimmten Punkt. Sie bilden diese mithilfe von Keyframes auf der Zeitachse ab.

@keyframes

Sie wissen nun, was ein Keyframe ist. Dieses Wissen sollte Ihnen helfen, zu verstehen, wie die CSS-Regel @keyframes funktioniert. Hier ist eine grundlegende Regel mit zwei Zuständen.

@keyframes my-animation {
    from {
        transform: translateY(20px);
    }
    to {
        transform: translateY(0px);
    }
}

Der erste zu beachtende Teil ist die benutzerdefinierte ID (benutzerdefinierte Kennung) – oder besser gesagt der Name der Keyframe-Regel. Die ID dieser Regel lautet my-animation. Die benutzerdefinierte Kennung funktioniert wie ein Funktionsname. Wie Sie im Funktionsmodul gelernt haben, können Sie an anderer Stelle im CSS-Code auf die Keyframe-Regel verweisen.

Innerhalb der Keyframe-Regel sind from und to Keywords, die 0% und 100% darstellen. Diese bilden den Beginn der Animation und das Ende. Sie könnten dieselbe 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 Kontext des Beispiels „Takter“ gibt es zwei Zustände, die sich in zwei Keyframes verwandeln. Das bedeutet, dass Sie zwei Positionen innerhalb der Keyframe-Regel haben, um die Änderungen an den einzelnen Keyframes darzustellen.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

Die animation-Properties

Wenn Sie das @keyframes in einer CSS-Regel verwenden möchten, definieren Sie verschiedene Animationseigenschaften oder verwenden Sie die Kurzeigenschaft animation.

animation-duration

.my-element {
    animation-duration: 10s;
}

Mit der Eigenschaft animation-duration wird definiert, wie lang die @keyframes-Zeitachse sein soll. Es sollte ein Zeitwert sein. Der Standardwert ist 0 Sekunden, was bedeutet, dass die Animation zwar weiter läuft, aber zu schnell für Sie ist. Sie können keine negativen Zeitwerte hinzufügen.

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 werden häufig gekrümmt, d. h. die Animation wird mit variablen Geschwindigkeiten über den Verlauf von animation-duration ausgeführt. Wenn ein Wert über den in @keyframes definierten Wert hinaus berechnet wird, wirkt das Element so, als ob es abspringt.

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;
}

Die Werte scheinen sich mit Easing-Funktionen gekrümmt zu zeigen, da das Easing mithilfe einer Bézier-Kurve berechnet wird, mit der die Geschwindigkeit modelliert wird. Alle Schlüsselwörter wie ease für die Zeitfunktion verweisen auf eine vordefinierte Bézierkurve. In CSS können Sie eine Bézier-Kurve direkt mithilfe der cubic-bezier()-Funktion definieren, die vier Zahlenwerte akzeptiert: x1, y1, x2 und 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 und visuelle Tools wie dieser Generator von Lea Verou sind sehr hilfreich.

Die Easing-Funktion steps

Manchmal benötigen Sie vielleicht eine detailliertere Steuerung der Animation, anstatt sich entlang einer Kurve zu bewegen, sondern in Intervallen. Mit der Easing-Funktion steps() können Sie die Zeitachse in definierte, gleiche Intervalle unterteilen.

.my-element {
    animation-timing-function: steps(10, end);
}

Das erste Argument gibt die Anzahl der Schritte an. Wenn die Schritte als 10 definiert sind und 10 Keyframes vorhanden sind, wird jeder Keyframe für den exakten Zeitraum der Reihe nach abgespielt, ohne dass der Übergang zwischen den Zuständen erfolgt. Wenn nicht genügend Keyframes für die Schritte vorhanden sind, werden abhängig vom zweiten Argument Schritte zwischen Keyframes hinzugefügt.

Das zweite Argument ist die Richtung. Wenn sie auf end (Standardeinstellung) gesetzt ist, werden die Schritte am Ende der Zeitachse abgeschlossen. 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 @keyframes-Zeitachse ausgeführt werden soll. Der Standardwert ist 1, was bedeutet, dass die Animation am Ende der Zeitachse anhält, wenn sie das Ende der Zeitachse erreicht. Die Zahl darf keine negative Zahl sein.

Mit dem Schlüsselwort infinite können Sie Ihre Animation als Schleife wiedergeben. So funktioniert die Takter-Demo 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:

• normal: der Standardwert für Weiterleitungen.
• reverse: rückt auf der Zeitachse rückwärts vor.
• alternate: Bei jedem Animationsdurchlauf läuft die Zeitachse der Reihe nach vor oder zurück.
• alternate-reverse: die Umkehrung von alternate.

animation-delay

.my-element {
    animation-delay: 5s;
}

Die Eigenschaft animation-delay definiert, wie lange bis zum Start der Animation gewartet werden soll. Wie die Eigenschaft animation-duration kann auch hier ein Zeitwert angegeben werden.

Im Gegensatz zum Attribut animation-duration können Sie dies als negativen Wert definieren. Wenn Sie einen negativen Wert festlegen, beginnt die Zeitachse in @keyframes an diesem Punkt. Wenn Ihre Animation beispielsweise 10 Sekunden lang ist und Sie animation-delay auf -5s festlegen, beginnt sie auf der Hälfte der Zeitachse.

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 ihn auf paused festlegen, wird die Animation pausiert.

animation-fill-mode

Mit der Eigenschaft animation-fill-mode wird definiert, welche Werte auf der @keyframes-Zeitachse vor oder nach dem Ende der Animation erhalten bleiben. Der Standardwert ist none. Das bedeutet, dass die Werte auf der Zeitachse verworfen werden, wenn die Animation abgeschlossen ist. Weitere Optionen sind:

• forwards: Der letzte Keyframe bleibt abhängig von der Animationsrichtung erhalten.
• backwards: Der erste Keyframe bleibt abhängig von der Animationsrichtung erhalten.
• both: folgt den Regeln für forwards und backwards.

Die Abkürzung animation

Anstatt alle Attribute separat zu definieren, können Sie sie in einer Kurzschreibweise mit animation definieren. Dadurch können Sie die Animationseigenschaften in der folgenden Reihenfolge definieren:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Überlegungen bei der Arbeit mit Animationen

Nutzer können in ihrem Betriebssystem festlegen, dass sie die Bewegungsgeschwindigkeit bei der Interaktion mit Anwendungen und Websites reduzieren möchten. Diese Präferenz kann mithilfe der Medienabfrage prefers-reduced-motion erkannt werden.

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Dies bedeutet nicht unbedingt, dass keine Animationen bevorzugt werden, sondern vielmehr eine Einstellung zur Reduzierung von Animationen – insbesondere unerwartete. Weitere Informationen zu dieser Einstellung und zur Gesamtleistung finden Sie in dieser Animationsanleitung.

Überprüfen Sie Ihr Wissen

Testen Sie Ihr Wissen über Animationen