CSS Animation

Mit einer Animation (CSS - Keyframes) kann ein Element schrittweise von einem Style in einen anderen wechseln.

Beispiele: Animationen mit Keyframes, Blinkende Inhalte mit Keyframes, Animierte Sternebewertung,
Regenbogen Text, Box-Shadow Animation, Button Glas-Effekte,
Eine Animation ab einer bestimmten Scroll-Position starten und Animierte Box mit Keyframes.

1. Dauer der Animation
<number> Seconds
2. Geschwindigkeitskurve der Animation
linear, ease, ease-in, ease-out, ease-in-out, steps()
3. Verzögerung für den Start der Animation
<number> Seconds
4. Wie oft soll die Animation ausgeführt werden
<number>, infinite
5. Richtung der Animation
normal, alternate, reverse , alternate-reverse
6. Animation Füllmodus
forwards, backwards, both
7. Animation-Abspielzustand
running, paused
8. Keyframes - Animationssequenz (Wegepunkte, Zwischenschritte)
9. Start der Animationssequenz
<style>
div#meinDiv {
}

div#meinDiv:hover {
 animation: animationName 0.1s ;
}

@keyframes animationName {
 0% {
 
 }
 25% {
 
 }
50% {
 
 }
 75% {
 
 }
 100% {
 
 }
}
</style>

<div id="meinDiv"></div>

Beispiel

(Mouseover)
<style>
div#meinDiv {
 width: 100px;
 height: 100px;
 outline: Solid 1px #0080C0;
}

div#meinDiv:hover {
 animation: animationName 2s infinite alternate;
}

@keyframes animationName {
 0% {
  background-color: #000000;
 }
 25% {
  background-color: #FF80C0;
 }
 50% {
  background-color: #FF8000;
 }
 75% {
  background-color: #00FF00;
 }
 100% {
  background-color: #FF80FF;
 }
}
</style>

<div id="meinDiv"></div>