Mit Animationen können in CSS Eigenschaftsänderungen definiert werden. Es gibt 2 Arten Animationen zu definieren, einmal mit Prozentangaben und einmal mit from und to.
from & to
In diesem Beispiel wird ein Div Container die Hintergrundfarbe ändern.
Zuerst muss die Animation definiert werden.
@keyframes farbverlauf{ from {background-color: red;} to {background-color: yellow;} }Danach muss mit animation-name die Animation auf ein Element gebunden werden, des weiteren muss mit animation-duration die Dauer der Animation angegeben werden. Mit animation-iteration-count wird die Wiederholungsanzahl angegeben, mit infinite, übersetzt unendlich, wird die Animation unendlich oft wiederholt.
div { animation-name: farbverlauf; animation-duration: 4s; animation-iteration-count: infinite; }Prozentangaben
Mit Prozentangaben können mehrere Abschnitte definiert werden, und x Prozent von der Zeit aktiviert werden.
@keyframes farbverlauf{ 0% {background-color: red;} 20% {background-color: yellow;} 50% {background-color: green;} 80% {background-color: yellow;} 100% {background-color: red;} } div { animation-name: farbverlauf; animation-duration: 4s; animation-iteration-count: infinite; }mehrere Änderungen auf einmal
ES können auch mehrere Änderungen gleichzeitig erstellt werden, einfach die zu ändernde Eigenschaften mit einem Semikolon trennen.
Animation verzögern
Mit der animation-delay Eigenschaft können Animationen verzögert abgespielt werden. Dabei tritt aber nur beim ersten Start die Verzögerung in kraft.
starte Animation
Wiederholungen
Der animation-iteration-count gibt an wie oft sich eine Animation wiederholt, mit infinite läuft die Animation unendlich oft ab.
Dieses Beispiel zeigt ein shake Effekt, der z.B. bei fehlerhaften Formulareingaben benutzt werden kann.
Timing verhalten
Mt der Eigenschaft animation-timing-function kann der Verlauf der Animation geändert werden.
linear
geradeliniger Verlauf
ease
Zum Ende hin langsamer werdend.
ease-in
Zum Ende hin schneller werdend.
ease-out
Zum Ende hin langsamer werdend.
ease-in-out
Von langsam zu schnell und wieder zu langsam.
alle im Vergleich
cubic-bezier
Mit cubic-bezier kann eine eigene Kurve definiert werden.
animation-timing-function: cubic-bezier(0,0,0,0);}animation-timing-function: cubic-bezier(1,0,0,0);}animation-timing-function: cubic-bezier(0,1,0,0);}animation-timing-function: cubic-bezier(0,0,1,0);}animation-timing-function: cubic-bezier(0,0,0,1);}Richtung
Die Direction Eigenschaft lasst die Animation vorwärts oder rückwärts ablaufen.
normal
Normal ist die Standardeinstellung, die Animation wird wie definiert abgespielt.
reverse
Die Animation wird rückwärts abgespielt.
alternate
Die Animation wird abwechselnd vorwärts danach rückwärts abgespielt.
alternate-reverse
Die Animation wird abwechselnd rückwärts danach vorwärts abgespielt.
