Animation

Die `animation`-Eigenschaft in CSS kann verwendet werden, um viele andere CSS-Eigenschaften zu animieren, wie z. B. color, background-color, height oder width. Jede Animation muss mit der `@keyframes`-Regel definiert werden, die dann mit der `animation`-Eigenschaft aufgerufen wird, wie hier:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}

Jede `@keyframes`-Regel definiert, was zu bestimmten Zeitpunkten während der Animation geschehen soll. Zum Beispiel ist 0 % der Anfang der Animation und 100 % das Ende. Diese Keyframes können dann entweder über die Kurzschreibweise `animation` oder ihre acht Untereigenschaften gesteuert werden, um mehr Kontrolle darüber zu geben, wie diese Keyframes manipuliert werden sollen.

Untereigenschaften

• animation-name: Deklariert den Namen der `@keyframes`-Regel, die manipuliert werden soll.
• animation-duration: Die Zeitspanne, die eine Animation benötigt, um einen Zyklus abzuschließen.
• animation-timing-function: Legt voreingestellte Beschleunigungskurven fest, wie z. B. `ease` oder `linear`.
• animation-delay: Die Zeit zwischen dem Laden des Elements und dem Beginn der Animationssequenz (coole Beispiele).
• animation-direction: Legt die Richtung der Animation nach dem Zyklus fest. Der Standardwert wird bei jedem Zyklus zurückgesetzt.
• animation-iteration-count: Die Anzahl der Wiederholungen, die die Animation ausführen soll.
• animation-fill-mode: Legt fest, welche Werte vor/nach der Animation angewendet werden.
  Sie können zum Beispiel den letzten Zustand der Animation auf dem Bildschirm verbleiben lassen oder ihn so einstellen, dass er zum Zustand vor Beginn der Animation zurückkehrt.
• animation-play-state: Pausiert/spielt die Animation ab.

Diese Untereigenschaften können dann wie folgt verwendet werden:

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

Hier ist eine vollständige Liste, welche Werte jede dieser Untereigenschaften annehmen kann:

animation-timing-function	ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (z. B. cubic-bezier(0.5, 0.2, 0.3, 1.0))
animation-duration	Xs oder Xms
animation-delay	Xs oder Xms
animation-iteration-count	X
animation-fill-mode	forwards, backwards, both, none
animation-direction	normal, alternate
animation-play-state	paused, running, running

Mehrere Schritte

Wenn eine Animation die gleichen Start- und End-Eigenschaften hat, ist es nützlich, die 0 % und 100 % Werte innerhalb von `@keyframes` durch Kommata zu trennen.

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}

Mehrere Animationen

Sie können die Werte auch durch Kommas trennen, um mehrere Animationen auf einem Selektor zu deklarieren. Im folgenden Beispiel möchten wir die Farbe des Kreises in einem `@keyframe` ändern und ihn gleichzeitig mit einer anderen Animation von Seite zu Seite verschieben.

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}

Performance

Das Animieren der meisten Eigenschaften ist ein Performance-Anliegen, daher sollten wir mit Vorsicht vorgehen, bevor wir eine beliebige Eigenschaft animieren. Es gibt jedoch bestimmte Kombinationen, die sicher animiert werden können:

• transform: translate()
• transform: scale()
• transform: rotate()
• opacity

Welche Eigenschaften können animiert werden?

MDN hat eine Liste von CSS-Eigenschaften, die animiert werden können. Animierbare Eigenschaften sind tendenziell Farben und Zahlen. Ein Beispiel für eine nicht animierbare Eigenschaft ist `background-image`.

Browser-Unterstützung

Weitere Informationen

• CSS-Animationen verwenden (MDN)
• CSS Animations Level 1 (W3C-Spezifikation)
• CSS Animation Shorthand Property (DigitalOcean)
• Web Animation at Work (A List Apart)
• Fünf Wege, um verantwortungsbewusst zu animieren (24 Ways)

Verwandte Tricks!

Verwandt