UTILS.
Privat von Anfang an
⤿

CSS Animation Generator

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

Deine Dateien bleiben auf diesem Gerät

Dateien werden im Browser verarbeitet, nie hochgeladen. Die Website lädt den benötigten Code und die Ressourcen herunter. Ohne Konto und Tracker.

Speichere dieses Tool über Herunterladen als einzelne HTML-Datei zur Offline-Nutzung.

Datenschutz →

Ü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