CSS-Animation-Generator

Erstelle CSS-Animationen visuell. Wähle Presets, passe Dauer, Timing und Richtung an. Kopiere den CSS-Code mit @keyframes. Kostenlos, 100% in deinem Browser.

Vorschau

Vorlage

Dauer

1.0s

Timing-Funktion

Verzögerung

0.0s

Wiederholungen

Unendlich

Richtung

Füllmodus

CSS-Ausgabe

Referenz

Was sind CSS-Animationen?

CSS-Animationen ermöglichen flüssige Übergänge zwischen CSS-Zuständen mittels @keyframes-Regeln. Sie bieten volle Kontrolle über Dauer, Timing, Verzögerung, Wiederholungen und Richtung — ohne JavaScript.

Animations-Presets

Häufig verwendete Animationen umfassen Einblenden (fade-in), Hineingleiten (slide-in), Pulsieren (pulse), Hüpfen (bounce), Drehen (spin) und Wackeln (shake). Jedes Preset definiert passende @keyframes-Schlüsselbilder, die du weiter anpassen kannst.

Datenschutz

Alle Verarbeitung läuft 100% in deinem Browser. Es werden keine Daten an Server gesendet.

← Zurück zu allen Tools