Animation

Mit einer Animation kann ein Element schrittweise von einem Stil in einen anderen wechseln.

An diesem Generator wird noch gearbeitet, Fehler können deshalb auftreten!

Dauer der Animation <number> Seconds
Geschwindigkeitskurve der Animation linear, ease, ease-in, ease-out, ease-in-out
Verzögerung für den Start der Animation <number> Seconds
Wie oft soll die Animation ausgeführt werden <number>, infinite
Animation normal, reverse, rückwärts , alternate-reverse
Animation Füllmodus forwards, backwards, both
Animation-Abspielzustand running, paused
Keyframes - Animationssequenz (Wegepunkte, Zwischenschritte)
<style>
div#meinDiv {
}

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

@keyframes animationName {
0% {

}
25% {

}
50% {

}
75% {

}
100% {

}
}
</style>

Beispiel

<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>

🔔