CSS Animations Generator
Einstellungen
Vorschau & CSS
Anleitung
- Preset auswählen — Fade In, Slide Up, Bounce oder Pulse als Ausgangspunkt wählen.
- Dauer einstellen — Schieberegler von 0,1 bis 5 Sekunden für die Geschwindigkeit.
- Timing wählen — Easing-Funktion für die Beschleunigung auswählen.
- Verzögerung & Wiederholungen — Startverzögerung und Anzahl der Wiederholungen festlegen.
- Richtung & Fill Mode — Steuern, ob die Animation vorwärts, rückwärts oder alternierend abläuft.
- CSS kopieren — Den vollständigen
@keyframes-Block inklusive Animation-Shorthand erhalten.
Was ist die CSS-Animation-Eigenschaft?
Die CSS-animation-Kurzschreibweise kombiniert acht Untereigenschaften: Name, Dauer, Timing-Funktion, Verzögerung, Iterationszahl, Richtung, Fill-Mode und Play-State. Damit werden keyframe-basierte Animationen ohne JavaScript realisiert.
@keyframes definiert die Zustände. Die animation-Eigenschaft wendet sie auf Elemente an. Mehrere Animationen können durch Komma getrennt kombiniert werden.
Häufige Anwendungsfälle
Tipps & Best Practices
Das Animieren von transform und opacity nutzt den Compositor-Thread — deutlich günstiger als Layout-Eigenschaften wie width oder top.
Animationen in @media (prefers-reduced-motion: no-preference) einkapseln, damit Benutzer, die weniger Bewegung bevorzugen, nicht beeinträchtigt werden.
fill-mode: both kombiniert forwards und backwards — das Element startet im ersten und verbleibt im letzten Keyframe-Zustand.
Die gleiche Animation auf mehrere Elemente mit schrittweise steigender Verzögerung anwenden für gestaffelte Eingangseffekte.
Häufig gestellte Fragen
Was ist der Unterschied zwischen animation-direction: alternate und reverse?
reverse spielt die Keyframes in jedem Zyklus rückwärts ab. alternate wechselt zwischen Vorwärts und Rückwärts, erzeugt einen Ping-Pong-Effekt.
Wann sollte ich animation-fill-mode: forwards verwenden?
forwards verwenden, wenn das Element nach Animationsende im letzten Keyframe-Zustand verbleiben soll — zum Beispiel ein Fade-In, das sichtbar bleiben soll.
Kann ich mehrere Eigenschaften gleichzeitig animieren?
Ja. Ein @keyframes-Block kann beliebig viele CSS-Eigenschaften in jedem Schritt setzen. Das Slide-Up-Preset animiert zum Beispiel transform und opacity gleichzeitig.
Was ist cubic-bezier(0.4, 0, 0.2, 1)?
Dies ist die Material-Design-Easing-Kurve von Google — schneller Start mit sanfter Abbremsung, die UI-Übergängen ein natürliches, physisches Gefühl verleiht.