In einem früheren Artikel hast du gesehen, wie du mit der CSS-Eigenschaft transition einfache Animationen umsetzt, also wie du eine Eigenschaft über CSS3-Transitions von einem Wert auf einen anderen bringst. Allerdings geben die CSS3-Transitions wenig Kontrolle darüber, wie die Animation zeitlich abläuft.
Die CSS-Eigenschaft animation dagegen baut Animationen aus Keyframes, also aus einzelnen Schlüsselbildern.
CSS3-Animationen erstellen
CSS-Animationen bauen auf Keyframes auf: Damit legst du fest, wie sich CSS-Eigenschaften über die Zeit verändern, ähnlich wie früher bei Flash-Animationen.
- Der erste Schritt zu einer CSS-Animation besteht darin, die einzelnen Keyframes zu definieren und die Animation in einer @keyframes-Regel zu benennen.
- Im zweiten Schritt referenzierst du die Keyframes über ihren Namen mit der Eigenschaft animation-name und ergänzt animation-duration sowie weitere optionale Animationseigenschaften, die das Verhalten der Animation steuern.
Du musst die keyframes-Regeln aber nicht vollständig definieren, bevor du sie referenzierst oder anwendest.
Das folgende Beispiel zeigt, wie du ein <div> mit der Eigenschaft css animation horizontal von einer Position zur anderen bewegst.
See the Pen
[1] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Damit eine Animation überhaupt läuft, brauchst du mindestens zwei Eigenschaften: animation-name et animation-duration (größer als 0). Alle anderen Animationseigenschaften sind optional, denn ihre Standardwerte verhindern keine Animation.
Hinweis: Nicht jede CSS-Eigenschaft lässt sich animieren. In der Regel ist jede Eigenschaft animierbar, die Zahlen, Längen, Prozentwerte oder Farben als Wert annimmt.
Keyframes definieren
Keyframes legen die Werte der Animationseigenschaften in den verschiedenen Stadien der Animation fest. Geschrieben werden sie in einer eigenen CSS-Regel – @keyframes. Der Keyframe-Selektor beginnt mit einem Prozentwert (%) oder mit den Schlüsselwörtern from (entspricht 0 %) oder to (entspricht 100 %). Er bestimmt, an welcher Stelle der Animationsdauer ein Keyframe greift.
Die Prozentwerte beziehen sich auf die Dauer der Animation. 0 % ist der Startpunkt, 100 % der Endpunkt, 50 % die Mitte und so weiter. Ein Keyframe bei 50 % liegt in einer Animation von 2 Sekunden also bei 1 Sekunde.
See the Pen
[2] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Die Kurzschreibweise animation
Beim Bau einer Animation sind einige Eigenschaften im Spiel. Du kannst sie aber alle in einer einzigen Eigenschaft angeben und den Code damit kürzen.
Die Eigenschaft animation ist eine Kurzschreibweise, mit der du alle einzelnen Animationseigenschaften auf einmal setzt, in der angegebenen Reihenfolge. Zum Beispiel:
See the Pen
[3] CSS3 Animation – gekkode.com by Damien Flandrin (@dam62500)
on CodePen.dark
Hinweis: Fehlt ein Wert oder ist er nicht angegeben, greift der Standardwert dieser Eigenschaft. Fehlt etwa der Wert für animation-duration, passiert gar nichts, denn ihr Standardwert ist 0.
Die CSS3-Animationseigenschaften
Die folgende Tabelle gibt einen kurzen Überblick über alle Eigenschaften rund um css animation.
| Eigenschaft | Beschreibung |
|---|---|
|
animation |
Kurzschreibweise, um alle Animationseigenschaften in einer einzigen Deklaration zu setzen. |
|
animation-name |
Gibt den Namen der mit @keyframes definierten Animation an, die auf das gewählte Element angewendet wird. |
|
animation-duration |
Gibt an, wie viele Sekunden oder Millisekunden ein Animationszyklus dauert. |
|
animation-timing-function |
Gibt an, wie die Animation über die Dauer jedes Zyklus fortschreitet, also die Funktionen easing, ease-in, ease-out, …. |
|
animation-delay |
Gibt an, wann die Animation startet. |
|
animation-iteration-count |
Gibt an, wie oft ein Animationszyklus abgespielt wird, bevor er endet. |
|
animation-direction |
Gibt an, ob die Animation in abwechselnden Zyklen rückwärts läuft. |
|
animation-fill-mode |
Gibt an, wie eine CSS-Animation vor und nach ihrem Ablauf Stile auf ihr Ziel anwendet. |
|
animation-play-state |
Gibt an, ob die Animation läuft oder pausiert. |
|
@keyframes |
Legt die Werte der Animationseigenschaften zu verschiedenen Zeitpunkten der Animation fest. |
Fazit
Damit hast du die Grundlagen für CSS3-Animationen. Schneller geht es mit Animationsbibliotheken, die dir einen Großteil der Arbeit abnehmen.
