UTILS.
100 % im Browser
⤿

CSS Animation Generator

Erstelle eine Keyframe-Animation, sieh sie live in der Vorschau und kopiere das CSS.

Über dieses Tool

Wähle eine voreingestellte Animation mit Dauer, Timing-Funktion und Anzahl der Wiederholungen, beobachte sie live, dann kopiere die @keyframes- und animation-Regeln. Alles läuft in deinem Browser.

Häufig gestellte Fragen

Was steuert die Anzahl der Wiederholungen?
Sie legt fest, wie oft die Animation abgespielt wird; wähle „infinite“ für eine Endlosschleife oder eine Zahl, um sie so oft auszuführen.
Wie starte ich die Animation neu?
Drücke „Erneut abspielen“ — die Animation wird kurz entfernt und wieder angewendet, sodass die Vorschau erneut ab dem ersten Keyframe läuft.

Weitere Tools