CSS-Animations-Generator
Ein CSS-Animations-Generator schreibt die @keyframes-Regel und die Animationseigenschaften für Sie. Wählen Sie eine der 16 Vorlagen, ziehen Sie die Regler Dauer und Verzögerung und legen Sie Wiederholungen, Richtung, Zeitfunktion und Füllmodus fest: Das Vorschauquadrat animiert sofort und der CSS-Code aktualisiert sich. Ein Klick auf bounce macht aus der Kurzzeile animation: bounce 1s ease 0s infinite normal;
Animationseigenschaften
CSS-Code
CSS-Animations-Generator
Generieren Sie CSS-Animationen sofort mit unserem visuellen Builder. 16 eingebaute Vorlagen.
Beliebte Werkzeuge
Über CSS-Animations-Generator
Dieser Generator baut eine vollständige CSS-Keyframe-Animation über ein visuelles Bedienfeld, sodass Sie sich die Reihenfolge der Eigenschaften nie merken müssen. Sechzehn Vorlagen stehen bereit — bounce, shake, pulse, fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, rotate, flip, swing, rubberBand, jello, heartBeat, flash und zoomIn — und jede Schaltfläche trägt genau den @keyframes-Bezeichner, den sie schreibt. Ein Klick auf eine Vorlage kopiert diesen Bezeichner zugleich in das Feld Name der Animation, das Sie danach frei ändern können.
Sechs Regler formen das Ergebnis. Dauer reicht von 0.1 bis 5 Sekunden in Zehnteln, Verzögerung von 0 bis 3 Sekunden. Wiederholungen bietet 1, 2, 3, 5 oder infinite. Richtung umfasst normal, reverse, alternate und alternate-reverse, die Zeitfunktion ease, ease-in, ease-out, ease-in-out, linear, step-start und step-end, der Füllmodus none, forwards, backwards und both. Jede Option steht als CSS-Schlüsselwort selbst da, Auswahlliste und erzeugter Code sagen also immer dasselbe Wort.
Neben der Vorschau erscheinen zwei Ausgaben. Die Zeile Kurzschreibweise ist die eine animation-Eigenschaft in der Reihenfolge Name, Dauer, Zeitfunktion, Verzögerung, Wiederholungen, Richtung und — sofern nicht none — Füllmodus. Der Block CSS-Code darunter ist die Langform: die vollständige @keyframes-Regel plus eine Klasse .animated-element mit je einer Eigenschaft pro Zeile. Kopieren kopiert die Langform.
Was er nicht tut: Er animiert ein Element mit einer Keyframe-Regel, ohne Verkettung, ohne scrollgebundene Zeitachsen und ohne CSS-Übergänge. Benennen Sie .animated-element nach dem Einfügen in Ihren eigenen Selektor um, und denken Sie daran, dass Besucher mit reduzierter Bewegung eine prefers-reduced-motion-Abfrage brauchen, die Sie selbst ergänzen müssen.
Anwendungsfälle
Anleitung
Klicken Sie oben auf eine der 16 Vorlagen. Jede Schaltfläche zeigt den @keyframes-Namen, den sie schreibt, und das Vorschauquadrat beginnt sofort zu animieren.
Stellen Sie die Regler Dauer und Verzögerung ein. Die Dauer reicht von 0.1 bis 5 Sekunden, die Verzögerung von 0 bis 3, beide in Zehntelsekunden.
Wählen Sie Wiederholungen und Richtung, danach Zeitfunktion und Füllmodus. Jede Option zeigt das CSS-Schlüsselwort, das sie erzeugt.
Ändern Sie das Feld Name der Animation, wenn Sie einen Bezeichner brauchen, der zu Ihrem Stylesheet passt, etwa loaderPulse statt pulse.
Beobachten Sie das Vorschauquadrat und lesen Sie dann die Zeile Kurzschreibweise für die Ein-Eigenschaft-Fassung oder das Feld CSS-Code für die vollständige @keyframes-Regel.
Drücken Sie Kopieren, fügen Sie die Langform in Ihr Stylesheet ein und ersetzen Sie .animated-element durch Ihren eigenen Selektor.
Profi-Tipps
- Ein Klick auf eine Vorlage überschreibt das Feld Name der Animation mit dem Bezeichner der Vorlage. Benennen Sie die Animation deshalb nach der Vorlagenwahl um, nicht davor.
- Die Verzögerung steht auch bei 0s in der Kurzschreibweise, während die Langform animation-delay bei Reglerstellung null ganz weglässt. Beide Ausgaben sind gleichwertig, aber nicht identisch.
- Der Füllmodus none ist die Vorgabe und fehlt ebenfalls in der Langform. Wählen Sie forwards, wenn das Element den Zustand der letzten Keyframe nach dem Ende behalten soll.
- Der Dauerregler endet bei 5 Sekunden und läuft in Zehnteln. Für etwas Langsameres kopieren Sie den Code und ändern den Wert von animation-duration von Hand; sonst bleibt alles gleich.
- Kombinieren Sie alternate mit Wiederholungen 2 für eine Hin-und-zurück-Bewegung, die am Ausgangspunkt endet. Mit infinite und normal springt das Element bei jeder Runde zur ersten Keyframe zurück.
Fehlerbehebung
Der eingetippte Animationsname ist verschwunden.
Ein Klick auf eine Vorlage setzt das Feld Name der Animation auf den Bezeichner dieser Vorlage, ein vorher getippter Name wird also überschrieben. Wählen Sie erst die Vorlage und tippen Sie dann Ihren Namen; Vorschau und beide Ausgaben folgen sofort.
Das eingefügte CSS bewirkt auf meiner Seite nichts.
Die Regel zielt auf die Klasse .animated-element, die es in Ihrem Markup vermutlich nicht gibt. Geben Sie dem Element diese Klasse oder benennen Sie den Selektor im eingefügten Code um. Der @keyframes-Block darüber muss bleiben, weil animation-name auf ihn verweist.
Das Element springt am Ende der Animation in die Ausgangslage zurück.
Das ist der voreingestellte Füllmodus none: Außerhalb der Laufzeit gelten die normalen Styles. Stellen Sie Füllmodus auf forwards, damit die letzte Keyframe erhalten bleibt, oder auf both, wenn auch die erste Keyframe während der Verzögerung gelten soll.
Häufig gestellte Fragen
Deklarieren Sie eine @keyframes-Regel mit den gewünschten Zuständen und verweisen Sie ein Element über die animation-Eigenschaften darauf. Dieser Generator macht beides: Vorlage wählen, Dauer, Verzögerung, Wiederholungen, Richtung, Zeitfunktion und Füllmodus einstellen und das Feld CSS-Code kopieren, das den @keyframes-Block und eine Klasse .animated-element enthält.
Eine Eigenschaft, die alles zusammenfasst, in der Reihenfolge Name, Dauer, Zeitfunktion, Verzögerung, Wiederholungen, Richtung und Füllmodus. Die Zeile Kurzschreibweise schreibt genau das: Die Seite startet mit animation: myAnimation 1s ease 0s infinite normal;, und ein Klick auf eine Vorlage tauscht den Namen. Der Füllmodus wird nur angehängt, wenn er nicht none ist.
Sechzehn: bounce, shake, pulse, fadeIn, fadeOut, slideInLeft, slideInRight, slideInUp, rotate, flip, swing, rubberBand, jello, heartBeat, flash und zoomIn. Jede Schaltfläche trägt den Bezeichner, der in der erzeugten @keyframes-Regel erscheint, und ein Klick kopiert ihn in das Feld Name der Animation.
Er bestimmt, wie das Element außerhalb der Laufzeit der Animation aussieht. none, die Vorgabe, lässt die normalen Styles gelten. forwards behält nach dem Ende die letzte Keyframe, backwards wendet während der Verzögerung die erste an, und both verbindet beides.
ease beginnt langsam, wird schneller und bremst wieder ab — deshalb ist es die CSS-Vorgabe; linear läuft von Anfang bis Ende mit konstanter Geschwindigkeit. Schalten Sie die Liste Zeitfunktion um und beobachten Sie das Vorschauquadrat: bei der Vorlage rotate ist der Unterschied deutlich sichtbar.
Stellen Sie Wiederholungen auf infinite, den Startwert dieses Generators. Die Liste bietet außerdem 1, 2, 3 und 5. Im kopierten CSS wird daraus animation-iteration-count: infinite, in der Kurzschreibweise ist es der fünfte Wert der Zeile.
Ja. Das Feld Name der Animation speist sowohl den @keyframes-Bezeichner als auch die Eigenschaft animation-name, beide können also nie auseinanderlaufen. Wählen Sie zuerst die Vorlage, denn ein Klick auf eine Vorlage ersetzt den Feldinhalt durch deren eigenen Bezeichner.
Bei einfacher Bewegung in der Praxis ja: Animationen von transform und opacity kann der Compositor ohne Layout-Neuberechnung übernehmen, und es läuft kein Skript pro Bild. Alles mit Logik, verketteten Abläufen oder Nutzereingaben gehört weiterhin in JavaScript.
Die hier verwendeten Eigenschaften — @keyframes, animation-name, duration, delay, iteration-count, direction, timing-function und fill-mode — sind präfixfreies CSS und werden von allen aktuellen Desktop- und Mobilbrowsern unterstützt. Herstellerpräfixe werden nicht geschrieben und sind für diese Vorlagen auch nicht nötig.
Umschließen Sie die Animation mit einer Media Query. Fügen Sie den erzeugten Code ein und ergänzen Sie @media (prefers-reduced-motion: reduce) { .animated-element { animation: none; } }, damit Menschen mit dieser Systemeinstellung keine Bewegung bekommen. Der Generator fügt diese Regel nicht selbst hinzu.