Was ist CSS-Animationsgenerator?

CSS-Keyframe-Animationen visuell erstellen — ohne Code von Hand zu schreiben. Keyframes festlegen, Timing-Funktionen waehlen, Dauer und Verzoegerungen anpassen und den CSS-Code direkt ins Projekt kopieren. Eignet sich gut fuer Buttons, Ladeanimationen, Hover-Effekte und Seitenuebergaenge.

Wähle aus einer Bibliothek mit über vierzig fertigen Animationen, gruppiert in Ein-/Ausblenden, Gleiten, Zoom, Drehen, Hüpfen, Aufmerksamkeit, Abgang und Ladeanimationen, oder baue deine Animation komplett selbst. Jeder Keyframe steuert Deckkraft, Skalierung, Drehung, Translate X und Y, Schräglage X und Y, Weichzeichnen, Eckenradius, Schlagschatten und Hintergrundfarbe. Schon ein @keyframes-Block vorhanden? Füge ihn in den Importdialog ein und der visuelle Editor stellt jeden Schritt wieder her. Pausiere die Vorschau und ziehe den roten Scrubber, um jeden Zwischenframe anzusehen — die Ausgabe ist schlichtes @keyframes-CSS, fertig zum Einfügen in jedes Stylesheet.

Anleitung

1. Waehlen Sie eine Animations-Vorlage (Einblenden, Gleiten, Huepfen, Drehen) oder beginnen Sie von Grund auf, indem Sie Keyframes auf der Zeitleiste hinzufuegen.
2. Passen Sie die Eigenschaften an jedem Keyframe an — Transform, Deckkraft, Farbe, Skalierung — und verfeinern Sie die Easing-Kurve, Dauer und Wiederholungsanzahl.
3. Sehen Sie sich eine Echtzeit-Vorschau der Animation an und kopieren Sie dann den generierten CSS-@keyframes-Code oder laden Sie ihn als .css-Datei herunter.

Wann verwenden

• Entry-Animations für Hero-Bereiche, Modals oder Cards beim Seitenaufruf hinzufügen.
• Mikrointeraktionen für Buttons gestalten, etwa leichtes Skalieren beim Hover oder ein Shake bei Formularfehlern.
• Ladespinner und Skeleton-Zustände prototypen, bevor sie in das Framework eingebaut werden.

Ergebnis

Ein Frontend-Entwickler benoetigt eine sanfte Einblend-Animation fuer Karten auf einer Portfolio-Seite. Er erstellt eine 0,6s ease-out-Animation, die von 20px unterhalb einblendet, kopiert das CSS und wendet es mit gestaffelter Verzoegerung pro Karte an.

Häufige Fragen

Was ist der Unterschied zwischen CSS-Animationen und CSS-Transitions?

Transitions wechseln einmalig auf einen Trigger hin (Hover, Focus, Klassenwechsel) von Zustand A zu B. Animations folgen einer @keyframes-Regel mit beliebig vielen Zwischenschritten, können loopen und starten beim Seitenaufruf ohne Nutzeraktion.

Warum läuft meine Animation einmal und verschwindet dann?

Das Element fällt nach dem Ende der Animation auf seine Basis-Styles zurück. Setze animation-fill-mode auf forwards, damit die Werte des letzten Keyframes bleiben, oder auf both, wenn auch der erste Keyframe während eines Delays gelten soll.

Welches Easing fühlt sich natürlich an?

Für Eingänge bremst ease-out am Ende und die Bewegung wirkt ruhig. Für Ausgänge funktioniert ease-in genau umgekehrt. cubic-bezier(0.34, 1.56, 0.64, 1) liefert einen kleinen Überschwinger, der verspielt wirkt, ohne albern zu sein.

Funktionieren diese Animationen in älteren Browsern?

@keyframes wird ohne Vendor-Prefix von jedem Browser unterstützt, der nach 2013 erschienen ist. Für IE 10 oder älter brauchst du das -webkit-Prefix, aber dieser Anteil liegt heute deutlich unter der Schwelle, die zusätzliches CSS rechtfertigt.

Wie lasse ich die Animation dauerhaft loopen?

Setze iteration-count auf infinite und kombiniere es mit direction: alternate. Jeder Zyklus läuft dann rückwärts, du bekommst ein weiches Hin und Her (sehr gut für Pulse und Shake) statt eines harten Sprungs zum Anfang.

Ähnliche Tools