CSS Animation

CSS Animation

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.


wallpaper-1019588
#1105 [Session-Life] Weekly Watched 2021 #18
wallpaper-1019588
TRP122 #TrailTypen - Kim Cremer, Laufen mit Prothese
wallpaper-1019588
Tourismus: Briten wollen in Portugal 2 Milliarden ausgeben
wallpaper-1019588
6 Kommandos, die dein Hund kennen sollte und wie du sie ihm beibringst