CSS-Animations-Generator

Es erstellt @keyframes-Animationen auf visuelle Weise. Wählen Sie eine Voreinstellung oder definieren Sie Keyframe-Stopps, passen Sie Dauer/Verzögerung/Timing/Richtung an, sehen Sie eine Live-Vorschau und kopieren Sie CSS/SCSS/Tailwind.

Ja. Wählen Sie cubic-bezier (benutzerdefiniert), und es erscheint ein visueller Kurveneditor mit den Feldern x1/y1/x2/y2. Der resultierende Wert wird sowohl auf die Live-Vorschau als auch auf den generierten Code angewendet.

Sie gibt ein tailwind.config.js-Snippet aus, das theme.keyframes/animation für animate-<name>-Utilities erweitert. Das rohe @keyframes-CSS ist als Fallback enthalten.

Ja, der CSS Animation Generator ist zu 100% kostenlos, ohne Registrierung, ohne versteckte Gebühren und ohne Nutzungslimits. Die gesamte Verarbeitung erfolgt lokal in Ihrem Browser und gewährleistet vollständige Privatsphäre.

Absolut. Der CSS Animation Generator verarbeitet alles clientseitig in Ihrem Browser. Es werden keine Daten auf einen Server hochgeladen oder dort gespeichert. Ihre Inhalte bleiben jederzeit privat auf Ihrem Gerät.

Ja, der CSS Animation Generator ist vollständig responsiv und funktioniert auf Smartphones und Tablets. Sie können ihn auf jedem Gerät mit einem modernen Webbrowser nutzen, ohne App-Download.

Es ist kein Konto und keine Registrierung erforderlich. Öffnen Sie einfach den CSS Animation Generator in Ihrem Browser und legen Sie sofort los. Es gibt keine Anmeldeschranken oder Nutzungsbeschränkungen.

Der CSS Animation Generator unterstützt eine breite Palette beliebter Formate und Sprachen. Die vollständige Liste der unterstützten Optionen finden Sie in der Tool-Oberfläche.

Geben Sie einfach Ihre Eingabe in das vorgesehene Feld ein, passen Sie die Einstellungen nach Belieben an, und das Tool verarbeitet sie sofort. Anschließend können Sie das Ergebnis in die Zwischenablage kopieren oder herunterladen.

Der CSS Animation Generator funktioniert in allen modernen Browsern, einschließlich Chrome, Firefox, Safari, Edge und Opera. Für das beste Erlebnis verwenden Sie die neueste Version Ihres bevorzugten Browsers.

Eine CSS-Transition animiert eine Eigenschaft zwischen zwei Zuständen und läuft nur als Reaktion auf einen Auslöser, etwa einen Hover-Effekt oder einen Klassenwechsel, indem sie sanft vom alten zum neuen Wert übergeht. Eine CSS-Animation nutzt @keyframes, um viele Zwischenschritte entlang einer Zeitachse zu definieren, und kann von selbst starten, sobald das Element geladen wird, endlos loopen, rückwärts laufen oder die Richtung wechseln. Transitions eignen sich am besten für einfache, einmalige Zustandswechsel wie einen Farbverlauf bei einem Button, während Animationen mehrstufige Bewegungen wie einen Bounce, einen Spinner oder eine Sequenz über mehrere Prozentwerte zwischen 0 % und 100 % abbilden. Dieser Generator setzt auf den @keyframes-Ansatz: Du definierst jeden Stopp, stellst Timing und Iteration ein, siehst die Live-Vorschau und kopierst sauberen CSS-, SCSS- oder Tailwind-Code.

Standardmäßig wirkt eine CSS-Animation nur, während sie läuft; vor dem Start und nach dem Ende springt das Element zurück zu seinen normalen Styles. Die fill-mode-Eigenschaft ändert das. "forwards" hält das Element auf seinem letzten Keyframe (100 %), nachdem die Animation beendet ist, sodass ein Fade-in sichtbar bleibt, statt zu verschwinden. "backwards" wendet den ersten Keyframe (0 %) während eines eventuellen Delays vor dem Start an und verhindert so ein kurzes Aufblitzen des un-animierten Zustands. "both" kombiniert beides: Start-Frame während des Delays, End-Frame danach — die sicherste Wahl für Entrance-Effekte. "none" deaktiviert all das. Der Generator bietet alle vier Werte an, sodass du den Fill Mode umschalten und die Live-Vorschau reagieren sehen kannst, bevor du den Code kopierst.

Setze die Iteration count auf "infinite" statt auf eine feste Zahl. Die Iteration count sagt dem Browser, wie oft die @keyframes von Anfang bis Ende abgespielt werden sollen; ein Wert von 1 spielt einmal, 3 spielt dreimal, und "infinite" wiederholt endlos, bis das Element entfernt oder die Animation pausiert wird. Für einen glatten, endlosen Spinner willst du zusätzlich eine "linear"-Timing-Function, damit jede Umdrehung mit konstanter Geschwindigkeit läuft und es an der Loop-Naht kein Easing gibt, plus einen einzelnen Keyframe, der von 0 auf 360 Grad rotiert. Die Spin-Vorlage in diesem Generator ist bereits so verdrahtet, aber du kannst dieselbe Infinite-Einstellung auf jede Vorlage anwenden, um pulsierende, wackelnde oder atmende Effekte zu erzeugen. Iteration auf infinite setzen, bei Bedarf linear für nahtloses Looping wählen, in der Vorschau prüfen und den Code kopieren.

Eine Cubic-Bezier-Timing-Function steuert, wie eine Animation über ihre Dauer beschleunigt und abbremst, und wird durch zwei Kontrollpunkte definiert, geschrieben als x1, y1, x2, y2. Die x-Werte müssen zwischen 0 und 1 liegen, da sie den Fortschritt in der Zeit darstellen, während die y-Werte auch unter 0 oder über 1 liegen können, um Overshoot- oder Anticipation-Effekte zu erzeugen — etwa einen Wert, der über sein Ziel hinausschießt, bevor er sich einpendelt. Der erste Punkt formt, wie die Bewegung am Anfang einsetzt; der zweite, wie sie am Ende ausklingt. Die bekannten benannten Easings sind nur Presets: ease-in entspricht ungefähr cubic-bezier(0.42, 0, 1, 1). Der visuelle Kurveneditor dieses Tools lässt dich alle vier Zahlen ziehen oder eingeben und zeichnet Kurve sowie Live-Vorschau sofort neu, sodass du das Gefühl feinjustieren kannst, bevor du es kopierst.

Dieses Zurückspringen passiert, weil eine Animation standardmäßig aufhört, das Element zu stylen, sobald sie abgeschlossen ist — das Element fällt dann auf sein normales CSS zurück. Setzt dein 0 %-Keyframe die Opacity auf 0 und ist der normale Zustand des Elements ebenfalls unsichtbar, verschwindet ein fertiges Fade-in wieder. Die Lösung ist animation-fill-mode: Nutze "forwards", damit das Element seinen 100 %-Keyframe nach Ende der Animation beibehält, oder "both", um auch einen eventuellen Start-Delay abzudecken. Ein Sprung am Anfang eines Loops bedeutet meist, dass sich 0 %- und 100 %-Keyframe nicht entsprechen, sodass die Zeitachse nicht nahtlos weiterlaufen kann. Der Generator hilft dir, beide Probleme zu erkennen: Fill Mode setzen, ersten und letzten Stopp angleichen und mit dem Replay-Button die Animation wiederholt ansehen, bis sie sauber läuft — bevor du das CSS kopierst.