CSS Animation Generator
Mit einer Animation (CSS - Keyframes) kann ein Element schrittweise von einem Style in einen anderen wechseln.
Weitere Animationen: Animationen mit Keyframes • Blinkende Inhalte mit Keyframes • Animierte Sternebewertung • Regenbogen Text • Ladeanimation ohne Bild-Grafik • Box-Shadow Animation • Button Glas-Effekte • Kompass-Animation • Eine Animation ab einer bestimmten Scroll-Position starten • Bilder-Farbrotation mit Gradient • Animierte Box mit Keyframes • Nahtlose unendliche Hintergrundbild-Scroll-Animation
1. Dauer der Animation
<number> Seconds
<number> Seconds
2. Geschwindigkeitskurve der Animation
linear, ease, ease-in, ease-out, ease-in-out, steps()
linear, ease, ease-in, ease-out, ease-in-out, steps()
3. Verzögerung für den Start der Animation
<number> Seconds
<number> Seconds
4. Wie oft soll die Animation ausgeführt werden
<number>, infinite
<number>, infinite
5. Richtung der Animation
normal, alternate, reverse , alternate-reverse
normal, alternate, reverse , alternate-reverse
6. Animation Füllmodus
forwards, backwards, both
forwards, backwards, both
7. Animation-Abspielzustand
running, paused
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>
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>
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>