6XC

CSS-Animations-Generator

Ein Keyframe-Preset wählen — Drehen, Pulsieren, Hüpfen, Wackeln, Ausblenden, Gleiten — Dauer und Wiederholungen einstellen, @keyframes + Klasse kopieren.

631 Aufrufe

CSS-Animationen

Eine Animation koppelt einen @keyframes-Block (was sich ändert) mit der animation-Eigenschaft (wie sie abläuft: Dauer, Timing, Wiederholungsanzahl). Anders als Übergänge laufen sie eigenständig, ohne Hover oder Klassenwechsel. Dieser Generator liefert sechs fertige Presets und gibt sowohl die Keyframes als auch eine einsatzbereite Klasse aus.

Häufig gestellte Fragen

Animation oder Transition — was ist richtig?

Transition reagiert auf eine Zustandsänderung (Hover, Klasse). Animation läuft eigenständig, kann endlos wiederholt werden und viele Schritte definieren — nutzen Sie sie für Spinner, Aufmerksamkeitspulse und Eintrittseffekte.

Wie respektiere ich Nutzer, die weniger Bewegung bevorzugen?

Umschließen Sie die Animation mit @media (prefers-reduced-motion: no-preference) { … } oder deaktivieren Sie sie in der reduzierten Variante — Nutzer mit vestibulärer Empfindlichkeit werden es Ihnen danken.

Ähnliche Tools

CSS-Farbverlauf-Generator Gestalten Sie lineare, radiale und konische CSS-Farbverläufe mit Live-Vorschau und kopieren Sie den Code. Erstellen CSS-Box-Shadow-Generator Gestalten Sie einen box-shadow visuell — Versatz, Unschärfe, Ausdehnung, Farbe, Deckkraft und Inset — mit Live-Vorschau. Erstellen CSS Border-Radius-Generator Runden Sie jede Ecke einzeln oder alle zusammen, in px oder %, mit Live-Vorschau und kopierbarem CSS. Erstellen CSS Text-Schatten-Generator Gestalten Sie einen text-shadow mit Versatz, Unschärfe, Farbe und Deckkraft — Live-Vorschau an Beispieltext. Erstellen