Genauere Animationen mit CSS keyframe animation

Worum geht´s?

Im bisherigen CSS Tutorial zu animierten Übergängen und hover-Effekten haben wir uns einfache CSS transitions angesehen. Was aber, wenn wir die Animation noch genauer bestimmen wollen – z.B. die Startzeit, nonlineare Abläufe, oder wie oft sie animiert wird? Das bringt uns zur CSS keyframe animation.

1. Zur Erinnerung: eine einfache CSS transition

Eine einfache CSS transition lässt sich so herstellen:

#div1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: all 0.2s ease-in;
}
#div1:hover {
  background-color: red;
}

Wenn man mit der Maus über das #div1 fährt, wird es innerhalb von 0.2 Sekunden rot, und der Übergang ist animiert.

Was aber, wenn wir komplexere Animationen in CSS einbauen wollen?

Dann brauchen wir den CSS-Befehl animation, und vor allem CSS keyframes:

2. Was ist ein CSS keyframe?

Einen CSS keyframe kann man sich so vorstellen wie einen vorbestimmten Punkt innerhalb der Animation. Das können Start- und Endpunkt sein, aber auch Punkte dazwischen.

Der einfachste Fall sind ein CSS keyframe für den Start und einer für das Ende. Der Weg zwischen diesen CSS keyframes wird dann innerhalb der vorbestimmten Zeit zurückgelegt und entsprechend animiert.

Angenommen, unser Startpunkt-keyframe beginnt bei einem margin von 0px. Unser Endpunkt-keyframe endet bei 200px. Und unsere Animationszeit ist voreingestellt auf 4 Sekunden.

Da wir nur zwei CSS keyframes haben, nämlich Start und Ende, wird die „Strecke“ zwischen 0px und 200px gleichmäßig aufgeteilt auf die zur Verfügung stehende Zeit, in diesem Fall 4 Sekunden.

Die Entwicklung sieht nun wie folgt aus:

• Nach 0 Sekunden: 0px
• Nach 1 Sekunde: 50px
• Nach 2 Sekunden: 100px
• Nach 3 Sekunden: 150px
• Nach 4 Sekunden: 200px

Nach 2,5 Sekunden wäre unser margin-Wert dann genau zwischen dem Wert von 2 und 3 Sekunden, also bei 125px.

Das ist das Prinzip der einfachsten Version von CSS keyframes – Startpunkt und Endpunkt.

Was aber, wenn ich eine ungleichmäßige Animation haben will?

Dann kann ich weitere CSS keyframes einführen, um die jeweilige Geschwindigkeit zwischen den einzelnen CSS keyframes zu beeinflussen.

Aber sehen wir uns das mal genauer in der Praxis an!

3. Wie wird eine CSS keyframe Animation verwendet?

Um eine CSS keyframe Animation nutzen zu können, müssen wir als erstes die jeweiligen CSS keyframes erstellen.

3.1 Eine einfache CSS keyframe Animation mit den keyframes from und to

Beginnen wir mit einem vergleichsweise einfachen Beispiel:

@keyframes grow {
  from {
    width:300%
  }

  to {
    width:100%;
  }
}

Das „from“ bezeichnet jeweils das CSS keyframe für den Start, das „to“ das jeweilige CSS keyfram für den Endpunkt der CSS keyframe Animation.

Das „grow“ im obigen Beispiel ist ein willkürlich gewählter Name. Du kannst dir (abgesehen von einigen Begriffen, die in CSS schon etwas bedeuten) da relativ kreativ eigene Namen für deine CSS keyframe Animationen ausdenken.

Dann müssen wir die Animation auch einem oder mehreren HTML-Elementen zuweisen, und bestimmen, wie lange sie dauern soll:

#div1 {
  width: 100px;
  height: 100px;
  background-color: blue;
  animation-duration: 1s;
  animation-name: grow;
}

Nachdem die Animation einmal abgelaufen ist, wird unser #div1 wieder auf die width von 100px „zurückschrumpfen“, und das ohne Übergangs-Animation.

Wie können wir erreichen, dass unser #div1 wieder schrumpft, aber animiert?

Wir setzen ein zusätzliches CSS keyframe:

3.2 Eine Animation mit mehreren CSS keyframes

Damit wir mehr als 2 keyframes in unserer CSS keyframe Animation verwenden können, müssen wir uns von unseren alten Bekannten „from“ und „to“ verabschieden.

Anstatt also unsere keyframes mit „from“ und „to“ zu bezeichnen, ändern wir sie ab in „0%“ und „100%“, also in etwa so:

@keyframes grow {
  0% {
    width:100px;
  }

  100% {
    width:300px;
  }
}

Die Animation funktioniert nach der Änderung noch genau so gut wie vorher.

Aber wir können nun einen weiteren CSS keyframe einfügen, beispielsweise mit 50%. Wenn wir den auf 300px setzen, und den mit 100% auf 100px, dann sollten wir eine smoothe Animation zurück zum Ausgangspunkt haben:

@keyframes grow {
  0% {
    width:100px;
  }

  50% {
    width:300px;
  }

  100% {
    width:100px;
  }
}

Was aber, wenn wir wollen, dass unser #div1 schneller wächst als es dann wieder schrumpft?

Dann müssen wir nur die %-Angaben entsprechend abändern.

Diese %-Angaben stehen ja in Wirklichkeit für einen Teil der zur Verfügung stehenden Zeit. Haben wir insgesamt 4 Sekunden Zeit für die Animation, dann dauert die „Strecke“ von 0-50% 2 Sekunden.

Soll unser #div1 z.B. innerhalb von 1 Sekunde schon auf den 300px sein, um dann langsam auf die ursprüngliche Größe zurück zu schrumpfen, so müssen wir nur die 50% in 25% ändern. Soll unser #div für sein Wachstum nur 0,5 Sekunden brauchen, gehen wir auf 12,5%, und so weiter.

Was aber, wenn wir wollen, dass unser #div1 2 Sekunden lang groß bleibt, bevor es wieder schrumpft?

Wir fügen einen weiteren CSS keyframe ein, und rechnen uns aus, auf wie vielen % dieser eingestellt werden muss (die Farbe ändert sich hier auch noch):

@keyframes grow {
  0% {
    width:100px;
  }

  12.5% {
    width:300px;
  }

  62.5% {
    width: 300px;
    background-color: red;
  }

  100% {
    width:100px;
  }
}

3.3 Weitere Möglichkeiten, unsere Animation abzuändern

Wahrscheinlich fragst du dich nun, wie man eigentlich diese CSS keyframe Animationen auch mehrfach „abspielen“ lassen kann. Dies und mehr erfährst du hier.

3.3.1 Eine Animation einfach, mehrfach oder unendlich oft abspielen

Mit Hilfe des CSS-Befehls „animation-iteration-count“ lässt sich mit Hilfe einer Zahl festlegen, wie oft eine Animation abgespielt werden soll. Alternativ kann man auch den Wert „infinite“ statt der Zahl einsetzen, um eine unendliche Wiederholung festzulegen:

animation-iteration-count: 3;

3.3.2 Die Animation umkehren oder alternieren lassen

Mit Hilfe des Befehls „animation-direction“ lässt sich die Richtung einer Animation festlegen, wobei es folgende Möglichkeiten gibt:

• normal: normale Richtung, wie voreingestellt in der CSS keyframe Animation
• reverse: Geht von 100% Richtung 0%
• alternate: Geht erst von 0-100%, dann zurück von 100-0%
• alternate-reverse: Geht erst von 100-0%, dann zurück von 0-100%

Also z.B. so:

animation-direction: alternate;

3.4 Der Shorthand-Befehl für eine CSS keyframe Animation

Es gibt für die CSS keyframe Animation auch einen Kurz-Befehl, der die animation-direction, animation-duration usw. zusammenfasst, damit man weniger schreiben muss:

animation: 3s infinite alternate grow;

4. Abschluss-Beispiel zur CSS keyframe Animation: ein „Psychodelisches Kunstwerk“

Zum Abschluss für die Jugendlichen und Junggebliebenen unter uns noch eine simple CSS keyframe Animation, die einfach ein schräges Farben-„Gewitter“ auslöst (Achtung: nicht für Eptileptiker geeignet!!):

#div1 {
  width: 100vw;
  height: 100vh;
  animation: 3s infinite alternate psycho;
}

@keyframes psycho {
  0% {
    background-color: red;
  }

  20% {
    background-color: yellow;
  }

  40% {
    background-color: blue;
  }

  60% {
    background-color: orange;
  }

  80% {
    background-color: green;
  }

  100% {
    background-color: white;
  }
}

Auf 3 Sekunden eingestellt ist das Ganze noch gut aushaltbar.

Aber auf einem großen Bildschirm, mit 0.2s eingestellt, bekommt man relativ rasch Kopfweh – probier es gerne aus, aber wir übernehmen keine Verantwortung für irgendwelche Folgeschäden – du wurdest gewarnt 😉

Das wars auch schon wieder über CSS keyframe Animationen.

Mit ein wenig Spielerei lassen sich damit relativ einfach sogar sowas wie ein Super Mario Level kreieren, das bewegliche Hindernisse enthält.

Viel Freude mit deinen neuen Möglichkeiten! 🙂

Diskussion zum Tutorial