CSS-Animations-Generator
Der CSS Animation Generator erstellt @keyframes-Animationen aus 14 Vorlagen wie Einblenden, Hereingleiten, Hereinspringen, Pulsieren, Drehen, Schütteln und Zoomen – mit Einstellungen für Dauer, Timing-Funktion und Anzahl der Wiederholungen.
Über dieses Tool
Der CSS Animation Generator erstellt @keyframes-Animationen aus 14 Vorlagen wie Einblenden, Hereingleiten, Hereinspringen, Pulsieren, Drehen, Schütteln und Zoomen – mit Einstellungen für Dauer, Timing-Funktion und Anzahl der Wiederholungen.
So funktioniert’s
- Wähle eine Animationsvorlage.
- Lege Dauer, Timing-Funktion und Anzahl der Wiederholungen fest.
- Drücke auf „Erneut abspielen“ für die Vorschau.
- Klicke auf „CSS kopieren“, um die @keyframes- und die animation-Regel zu erhalten.
Gut zu wissen
- Eine CSS-Animation besteht aus zwei Teilen: einer @keyframes-Regel und einer animation-Eigenschaft am Element.
- transform und opacity zu animieren, ist in Sachen Performance meist die flüssigste Wahl.
- Timing-Funktionen wie ease-out starten schnell und werden langsamer, was sich bei Einblendungen natürlich anfühlt.
- Berücksichtige die Media Query prefers-reduced-motion für Nutzer, die weniger Bewegung wünschen.
- Eine unendliche Wiederholung passt zu Ladeanimationen; Einblendeffekte laufen meist nur einmal.
Läuft komplett in deinem Browser – nichts, was du eingibst, wird hochgeladen oder gespeichert.
Häufige Fragen
Wie erstelle ich eine CSS-Animation?
Definiere die Bewegung in einer @keyframes-Regel und binde sie dann mit animation: name duration timing iteration ein. Der Generator schreibt dir beides.
Was ist der Unterschied zwischen CSS-Transitions und -Animationen?
Transitions animieren zwischen zwei Zuständen, wenn sich eine Eigenschaft ändert, etwa beim Hover. Animationen nutzen Keyframes, können automatisch starten und sich wiederholen.
Wie lasse ich eine Animation endlos laufen?
Setze die Anzahl der Wiederholungen auf infinite, zum Beispiel animation: spin 1s linear infinite.
Beeinflussen CSS-Animationen die Barrierefreiheit?
Große oder dauerhafte Bewegung kann manche Nutzer stören. Pack nicht notwendige Animationen in @media (prefers-reduced-motion: no-preference).