CSS-Animations-Generator

CSS-@keyframes-Animationen interaktiv erstellen. Keyframe-Stops bearbeiten, Dauer, Timing-Funktion, Verzögerung und Iteration einstellen — dann das fertige CSS kopieren.

Keyframes:

Stop position0%

CSS Properties

Animation name

Timing function

Duration1s

Delay0s

Iteration countinfinite

Infinite

Direction

Fill mode

Preview

Generated CSS

@keyframes myAnimation {
  0% {
    transform: rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: rotate(180deg);
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 1;
  }
}

.element {
  animation: myAnimation 1s ease 0s infinite normal none;
}

Buy me a coffee

Tipps & Tricks

transform und opacity für flüssigste Animationen verwenden — kein Layout-Neuberechnung nötig.
fill-mode: forwards hält das Element nach der Animation im letzten Keyframe-Zustand.
alternate Richtung spielt vorwärts und rückwärts — ideal für Endlosschleifen ohne Sprung.
cubic-bezier ermöglicht benutzerdefiniertes Easing über die Standard-Presets hinaus.

Verwandte Werkzeuge

CSS-Flexbox-Generator

Visueller Flexbox-Playground — flex-direction, flex-wrap, justify-content, align-items und Elementeigenschaften konfigurieren.

CSS-Box-Shadow-Generator

CSS-Box-Schatten visuell mit Schiebereglern erstellen. Mehrere Schatten-Ebenen, Blur, Spread, Farbe und Deckkraft.

CSS-Farbverlauf-Generator

Schöne CSS-Linear- und Radialfarbverläufe visuell erstellen. Farben, Stops und Winkel anpassen — fertiges CSS kopieren.

CSS-Farbverlauf-Textgenerator

Farbverlauf-Texteffekte online erstellen. 2–4 Farben wählen, Richtung festlegen und fertigen CSS-background-clip-Code kopieren.

CSS-Variablen-Generator

Vollständigen CSS-Custom-Properties-:root-Block für Farben, Abstände, Typografie und Border-Radius erstellen und kopieren.

CSS-Grid-Generator

CSS-Grid-Layouts visuell erstellen. Spalten, Zeilen, Abstände konfigurieren, Spans per Drag erstellen und CSS kopieren.

CSS-Border-Radius-Generator

Border-Radius-CSS mit unabhängigen Eckenreglern und Live-Vorschau visuell generieren.

CSS-Textschatten-Generator

Überlagerte CSS-Textschatten-Effekte mit Live-Vorschau und Einmal-Kopieren erstellen.

CSS-Filter-Generator

CSS-Filtereffekte generieren — Blur, Helligkeit, Kontrast, Farbton, Sättigung, Sepia und mehr — mit Live-Bildvorschau.

CSS-Clip-Path-Generator

CSS-clip-path-Formen interaktiv generieren — Polygone, Kreise und Ellipsen — mit Live-Vorschau. Kontrollpunkte verschieben.