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.

DNS-Eintrags-Generator

Erzeuge einfache DNS-Zeilen für gängige Record-Typen.

PDF komprimieren

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

Text Diff Prüfer

vergleichen two texts und highlight differences.

Zahlenbasis-Konverter

Zahlen zwischen Binär-, Oktal-, Dezimal- und Hexadezimalbasis sofort umrechnen.

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.