chevron_right

CSS-Keyframes-Generator

Erstelle benutzerdefinierte CSS-Keyframes visuell mit Live-Vorschau und kopierfertigem Code.

Keyframe-Name

Dauer (s)

Easing

Wiederholungen

Endlos wiederholen

Startzustand

Verschiebung X (px)

Verschiebung Y (px)

Skalierung

Deckkraft

Zwischenzustand

Verschiebung X (px)

Verschiebung Y (px)

Skalierung

Deckkraft

Endzustand

Verschiebung X (px)

Verschiebung Y (px)

Skalierung

Deckkraft

Live-Vorschau

Pulse

Generiertes CSS

css

Ahnliche Tools

CSS-Animations-Generator

Erstellen Sie wiederverwendbare CSS-Animationen mit Live-Bewegungsvorschau und kopierbaren Keyframes.

CSS-Grid-Generator

Erstellen Sie responsive CSS-Grid-Layouts mit Live-Vorschau und kopierbarem Code.

CSS-Verlaufs-Text-Generator

Erstelle Textstile mit Farbverlauf ueber visuelle Regler, Live-Vorschau und kopierfertiges CSS.

CSS Clip-Pfad-Generator

CSS clip-path Formen mit Live-Vorschau generieren.

Wasserzeichen zu PDF hinzufügen

Füge einer PDF ein Textwasserzeichen hinzu.

PDF komprimieren

Reduziere die Dateigröße eines PDF-Dokuments ohne es hochzuladen.

JSON-Formatierer

JSON-Daten formatieren und verschönern.

apps

Mehr Tools

Durchsuchen Sie unsere vollstandige Sammlung kostenloser Online-Tools.

Keyframes visuell entwerfen, bevor die Animation von Hand geschrieben wird

Eigene Keyframes geben mehr Kontrolle als eine fertige Preset-Animation, aber sie von Grund auf zu schreiben bremst oft das Ausprobieren. Dieser Generator hilft dabei, Bewegungszustände visuell zu formen und anschließend sauberes CSS zu übernehmen.

Wann das besonders hilfreich ist

Das Tool eignet sich gut für Übergangsprototypen, markeneigene Bewegungsmuster und den Vergleich mehrerer Varianten. Nach dem Generieren lohnt es sich, die Animation auch im echten UI-Kontext anzusehen, damit sie dort weiterhin stimmig wirkt.