CSS @keyframes-Animationsgenerator mit Vorschau

Eine CSS @keyframes-Animation (Einblenden, Gleiten, Springen ...) mit Vorschau und Code generieren.

Durations

▸CSS

@keyframes pulse {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}
.element {
  animation: pulse 1s ease-in-out infinite;
}

🔒 100 % clientseitig — keine Daten gesendet

Erstellen Sie CSS @keyframes-Animationen und kopieren Sie sofort nutzbaren Code mit Live-Vorschau. Passen Sie Schritte, Dauer und Timing an, ohne etwas von Hand zu schreiben. Das Tool läuft vollständig in Ihrem Browser, ohne dass Daten irgendwohin gesendet werden.

What is it for?

▸ Eine Button- oder Icon-Animation prototypisieren
▸ @keyframes-Code generieren, ohne ihn auswendig zu kennen
▸ Eine Animation vor der Integration in der Vorschau prüfen
▸ Dauer und Easing in Echtzeit feinabstimmen

FAQ

Kann ich das generierte CSS kopieren?

Ja, der vollständige @keyframes-Code ist direkt zum Einfügen bereit.

Ist die Vorschau live?

Ja, jede Änderung aktualisiert die Animation sofort.

Kann ich die Timing-Funktion wählen?

Ja, legen Sie Dauer, Easing und Wiederholungen fest.