Animationen

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.

Die Zustände der Pulsator-Animation im Zeitrahmen von einer Sekunde

Jeder dieser Animationsstatus beginnt und endet an einem bestimmten Punkt. Diese legen Sie auf der Zeitachse mit Keyframes fest.

Das gleiche Diagramm wie zuvor, diesmal mit keyframes

@keyframes

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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.

Ein Bézier-Kurvensegment in einem Diagramm mit Fortschritt im Zeitverlauf

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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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 wie alternate, aber die Animation beginnt mit der Rückwärtswiedergabe der Zeitachse.

animation-delay

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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:

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

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?

Nein
Ja

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

Dynamisches Timing
Erleichterung
Verzögerung

Wie viele Frames sind für eine @keyframes-Animation mindestens erforderlich?

2
1
4
3