Animationen mit CSS3 - Teil 3 Keyframe Animationen

Die beiden bisherigen Artikel basierten auf der CSS3-Eigenschaft transitions. Hier geht es jetzt um animation und @keyframes.

Grundlagen zum Syntax der Keyframe Animation

Eine Keyframe-Animation besteht aus den beiden Teilen animation und @keyframes

animation

Bei dieser Eigenschaft gibt es eine kompakte und eine ausführliche Schreibweise. Die kompakte Schreibweise sieht so aus:

animation: Name-der-Animation Dauer Timing-Funktion Verzoegerung Anzahl-der Durchlaeufe Richtung Ausfuellmodus

Der Name der Animation ist wichtig, auf ihn wird bei den @keyframes Bezug genommen.
Die Dauer der Animation in Sekunden gibt an, wie lange die Animation dauern soll.
Die Angabe der Timing-Funktion ist optional. Wenn keine angegeben wird, dann wird ease als Standardwert angenommen. Mögliche Werte sind: linear, ease, ease-out, ease-in, ease-in-out.
Auch die Angabe der Verzögerung ist optional. Sie gibt in Sekunden an, wie lange mit dem Start der Animation gewartet werden soll. Ohne Angabe einers werte startet die Animation unmittelbar.
Die optionale Angabe zur Anzahl der Durchläufe gibt an, wie oft eine Animation ausgeführt werden soll. Mit dem Schlüsselwort infinite kann festgelegt werden, dass die Animation unaufhörlich durchgeführt wird.
Bei der Richtung sind zwei Werte möglich: normal und alternate. normal ist der Standardwert. Mit dieser Vorgabe (bzw. ohne jegliche Angabe) wird die Animation bei jedem Durchlauf wieder von vorn begonnen. alternate, führt dazu, dass jeder zweite Durchlauf rückwärt durch geführt wird, es ergibt sich dann eine Art Vor-Zurück-Effekt.
Der optionale Ausfüllmodus kann drei Werte haben: none(Standard), forwards, backwards und both. Bei forwards bleibt der letzte Keyframe bei einer ungeraden Anzahl von Duchläufen erhalten. Bei backwards wird zu Beginn einer Animation an Stelle des Ausgangszustandes eines Elemente der erste Keyframe angezeigt, sofern eine Verzögerung festgelegt wird. both kombiniert diese beiden Varianten.

Diese Angaben können in der ausführlichen Schreibweise auch jeweils getrennt voneinander festgelegt werden mit:

animation-name: beispielanimation
animation-duration: 4s
animation-timing-function: ease-out
animation-delay: 1.5s
animation-iteration-count: infinite
animation-direction: alternate
animation-fill-mode: both

@keyframes

Während mit animation die Animationseigenschaften (Dauer, Wiederholung usw.) festgelegt werden, ist @keyframes für das Erscheinungsbild der Animation erfoderlich.

@keyframes Name-der-Animation {
20% {top: 0px}/* Startpunkt */
33% {top: 50px; animation-timing-function: linear} /* Zwischenpunkt */
100% {top: 100px; left: 10px} /* Endpunkt */
}

Der Name-der-Animation muss mit dem in animation festgelegten übereinstimmen. Danach folgen Anfangs- und Endpunkt der Animation sowie ein oder mehrere optionale Zwischenpunkte. Im Grunde reciht es sogar, nur einen einzigen Zwischenzustand festzulegen. Bei jedem dieser Punkte werden die CSS-Eigenschaften, die animiert werden sollen, mit ihren jeweiligen Zustand angegeben und zu welchem Zeitpunkt (angegeben in %) der Animation der Zustand erreicht werden soll.

Elementare Beispiele zu keyframe-Animation

Die bisherigen Ausführungen alsen sich möglicherweise kompliziert, doch so schwierig ist das alles nicht. Das lässt sich am besten an Hand von Beispielen verdeutlichen

Minimalbeispiel

Ich fange mit einem Minimalbeispiel an. Im HTML-Code wird das zu animierende Objekt festgelegt:

<div id="animiermich"></div>

Jetzt folgt der erste CSS-Teil. Das Objekt wird absolut positioniert, damit sich keine anderen Objekte verschieben, es folgende die Ausgangspositionierung, die Abmessungen und die Farbfestlegungen. Animationsspezifisch sind der Name und die Dauer der Animation.

#animiermich {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity:0.8;
  animation-name: bewegdich;
  animation-duration: 5s;
}

Dann kommt der @keyframes-Abschnitt im CSS-Bereich:

@keyframes bewegdich {
  50% {
    left: 800px;
  }
}

Zum Zeitpunkt 50% soll das Objekt auf die Position left: 800px; verschoben werden. Sehen wird uns dieses erste minimalistische Animationsbeispiel an. Innerhalb der halben Animationszeit (5/2=2,5 Sekunden) bewegt sich das Objekt von der Ausgangsposition zur Position left: 800px;. Da keine weiteren Animationspunkte angegeben sind, bewegt es sich in der zweiten Hälfte der Zeit wieder zurück zum Ausgangspunkt

Minimalbeispiel mit Veränderung mehrerer Eigenschaften

Jetzt folgt ein Beispiel, bei dem mehrere Eigenschaften gleichzeitig verändert werden. Dazu muss nur dieser Abschnitt angepasst werden:

@keyframes bewegdich {
  70% {
    left: 800px;
    width: 70px;
    height: 70px;
    top: 100px;
    transform:rotate(360deg);
    background-color:yellow;
  }
}

Jetzt wird die Position in beiden Dimensionen geändert, dazu noch die Größe und die Hintergrundfarbe. Außerdem wird mit transform:rotate(360deg); eine 360°-Drehung durchgeführt. Da der Animationspunkt größer als 50% ist, läuft die erste Hälfte der Animation schneller ab, als die zweite. Hier kann man sich das Beispiel ansehen.

Mehr zu diesem Thema

Bei den hier vorgestellten Beispielen laufen die Animationen entweder unendlich oft ab oder es gibt eine definierte Anzahl von Durchläufen. Im Abschnitt Keyframe Animationen anhalten und wieder starten erkläre ich, wie solche Animationen noch weiter beeinflusst werden können.

skywalk-webdesign.de