CSS-Animation-Generator
Der CSS-Animation-Generator erstellt @keyframes und animation-Eigenschaft mit Vorlagen, Dauer, Timing und Wiederholung und zeigt die Bewegung sofort in der Vorschau.
Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.
CSS-Animationen mit @keyframes
Mit dem CSS-Animation-Generator bauen Sie Animationen aus einer @keyframes-Regel und der Eigenschaft animation. Wählen Sie eine Vorlage wie Einblenden, Hereingleiten, Hüpfen oder Pulsieren, stellen Sie Dauer, Verzögerung, Wiederholungen, Richtung und Füllmodus ein und sehen Sie das Ergebnis sofort in der Animation Vorschau. Die Keyframes lassen sich frei bearbeiten; so können Sie jede Vorlage als Ausgangspunkt für eine eigene CSS Animation erstellen.
Die animation-timing-function bestimmt den Verlauf zwischen zwei Keyframes: ease beginnt langsam, wird schneller und bremst wieder ab, linear läuft gleichmäßig, steps() springt in Stufen. Eigene Kurven gestalten Sie mit dem Cubic-Bezier-Generator. Der Füllmodus both sorgt dafür, dass ein Element vor dem Start den ersten und nach dem Ende den letzten Zustand behält, was beim Einblenden ein Aufflackern verhindert.
Animieren Sie möglichst nur transform und opacity. Diese Eigenschaften kann der Browser ohne neues Layout berechnen, die Animation bleibt dadurch flüssig. Auf Wunsch ergänzt der Generator eine Regel für prefers-reduced-motion, die Animationen für Menschen abschaltet, die in ihrem System reduzierte Bewegung eingestellt haben. Dauerhaft blinkende Inhalte sollten Sie vermeiden; die WCAG verlangen, dass sich Bewegung, die länger als fünf Sekunden läuft, anhalten lässt.
Anleitung: CSS-Animation-Generator in 4 Schritten
- Eine Vorlage wie Einblenden, Hereingleiten, Hüpfen oder Pulsieren wählen oder mit „Eigene Keyframes“ beginnen.
- Den Namen der Animation sowie Timing, Dauer und Verzögerung einstellen.
- Wiederholungen, Richtung und Füllmodus festlegen und bei Bedarf „Rücksicht auf reduzierte Bewegung“ aktivieren.
- Die Keyframes frei bearbeiten, mit „Vorschau neu starten“ prüfen und den CSS-Code kopieren.
Typische Anwendungsfälle
- Elemente beim Laden einer Seite sanft einblenden oder von unten hereingleiten lassen.
- Einen Button pulsieren lassen, um auf eine wichtige Aktion hinzuweisen.
- Ladeanzeigen mit einer endlosen Drehung umsetzen.
- Fehlermeldungen in Formularen mit einem kurzen Schütteln sichtbar machen.
Häufige Fragen
Was ist der Unterschied zwischen transition und animation?
Eine transition läuft nur, wenn sich ein Wert ändert, etwa beim Überfahren mit der Maus, und kennt nur Start und Ziel. Eine animation startet von selbst, kann beliebig viele Zwischenschritte per @keyframes haben und sich wiederholen.
Was bedeutet animation-fill-mode?
Er legt fest, welche Werte vor dem Start und nach dem Ende gelten. forwards behält den letzten Keyframe, backwards übernimmt den ersten schon während der Verzögerung, both kombiniert beides.
Warum ruckelt meine Animation?
Häufig werden Eigenschaften wie width, height, top oder margin animiert, die bei jedem Schritt ein neues Layout erzwingen. Mit transform und opacity bleibt die Animation in den meisten Browsern flüssig.
Wie starte ich eine CSS-Animation erst beim Scrollen?
Mit reinem CSS über Scroll-Driven Animations, die noch nicht alle Browser unterstützen, oder mit wenig JavaScript: Ein IntersectionObserver fügt die Klasse mit der Animation hinzu, sobald das Element sichtbar wird.
Was macht die Regel für reduzierte Bewegung?
Sie greift, wenn im Betriebssystem reduzierte Bewegung eingestellt ist, und setzt die Animation auf none. So vermeiden Sie Schwindel und Ablenkung bei empfindlichen Menschen.
Wie lasse ich eine CSS-Animation endlos laufen?
Setzen Sie animation-iteration-count auf infinite, im Generator unter Wiederholungen „unendlich (infinite)“. Mit der Richtung alternate läuft die Animation abwechselnd vor und zurück, ohne zu springen.
Wie halte ich eine CSS-Animation am Ende an?
Mit animation-fill-mode: forwards bleibt das Element nach dem letzten Durchlauf im Zustand des letzten Keyframes stehen. Wählen Sie dazu im Generator den Füllmodus forwards oder both.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen