Animationen können komplexe und dynamische Effekte erzeugen, um die interaktive Benutzererfahrung zu verbessern. Animationen erfordern kein spezifisches Auslöseereignis und können so eingestellt werden, dass sie unendlich oft wiederholt werden. Darüber hinaus können Animationen mehrere Zwischenzustände zwischen dem Anfangs- und Endzustand enthalten, was eine größere Flexibilität und Kontrolle über die erzeugten visuellen Effekte ermöglicht.

Animation erstellen

Animationen können mit der @keyframes-Regel erstellt werden, die eine Reihe von CSS-Stilen an verschiedenen Punkten einer Animation definiert. Außerdem wird ein Name für die Animation festgelegt. Dieser sollte beschreibend sein, also angeben, um welche Art von Animation es sich handelt.

@keyframes AnimationName {
 /* Styles at various points (at least initial and final) */ 
}

Um die Änderung von Eigenschaften zu einem bestimmten Zeitpunkt festzulegen, können die Schlüsselwörter from (0%) und to (100%) verwendet werden. Meistens werden Prozentwerte genutzt.

@keyframes AnimationName {
  0% {
    /* Properties to be changed */
  }

  10% {
    /* Properties to be changed */
  }

  30% {
    /* Properties to be changed */
  }

  /* As many as we need */
  
  100% {
    /* Properties to be changed */
  }
}

Nachdem die Animation deklariert wurde, kann der Name der Keyframes als Wert für die Eigenschaft animation-name bei verschiedenen Elementen verwendet werden. Ein weiterer Vorteil von Animationen ist, dass sie wiederholt auf mehrere Elemente angewendet werden können.

selector {
  animation-name: AnimationName;
}

Übung

Fügen wir dem div-Element eine Animation hinzu. Die Aufgabe besteht darin, die Eigenschaft background-color im Zeitverlauf zu ändern. Der Anfangszustand ist green, bei 60% soll sie red sein und im Endzustand benötigen wir blue. Zusätzlich geben wir die Eigenschaft animation-duration an, um die Animation sichtbar zu machen.