CSS-Easing- und Animations-Visualisierer

Stimme das Timing von CSS-Animationen ab, indem du Easing-Kurve und Live-Vorschau gleichzeitig siehst.

Eingaben:

Gib ein eigenes cubic-bezier(x1, y1, x2, y2) ein, wähle einen benannten Preset (linear, ease, ease-in/out, ease-in/out-back, ease-in/out-expo, snappy…) oder ein Schlüsselwort.
Stelle Dauer (ms) und Verzögerung (ms) ein.

Der Bericht zeigt:

Die Easing-Kurve (Fortschritt vs Zeit) als SVG, mit den beiden Bézier-Kontrollpunkten, gegen eine gestrichelte Linear-Referenz. Überschwingende Kurven (y<0 oder y>1, wie ease-out-back) werden markiert, da sie Abprallen erzeugen, aber Layout-Sprünge verursachen können.
Drei Live-Vorschauen — translateX, opacity und scale — animiert mit dem echten CSS-Easing, mit Replay-Button.
Kopierfertiges CSS im transition- und @keyframes-Format.

Der Bézier-Löser nutzt Newton-Raphson mit Bisektions-Rückfall, um Zeit → Fortschritt abzubilden wie Browser es tun.

Wichtige Fakten

Kategorie: Design & Farbe
Eingabetypen: text, select, number
Ausgabetyp: html
Sample-Abdeckung: 4
API verfügbar: Yes

Überblick

Mit dem CSS-Easing- und Animations-Visualisierer können Sie CSS-cubic-bezier-Kurven interaktiv erstellen, analysieren und live testen. Das Tool visualisiert den zeitlichen Verlauf als SVG-Kurve, simuliert die Animationen für Position (translateX), Deckkraft (opacity) sowie Skalierung (scale) und stellt direkt kopierfähigen CSS-Code für Transitions und Keyframes bereit.

Wann verwenden

•Wenn Sie benutzerdefinierte cubic-bezier-Kurven für UI-Animationen präzise abstimmen und visuell testen möchten.
•Wenn Sie das Überschwingen von Kurven wie ease-out-back vor der Implementierung im Browser analysieren wollen.
•Wenn Sie fertigen CSS-Code für Übergänge (transition) und Keyframe-Animationen direkt in Ihr Stylesheet kopieren möchten.

So funktioniert es

•Geben Sie eine eigene cubic-bezier-Formel ein oder wählen Sie eine der Voreinstellungen wie ease-out-back oder snappy aus.
•Passen Sie die Animationsdauer und die Verzögerung in Millisekunden an, um das zeitliche Verhalten zu steuern.
•Analysieren Sie die generierte SVG-Kurve und beobachten Sie die Live-Vorschau der Effekte für Verschiebung, Deckkraft und Skalierung.
•Kopieren Sie den automatisch erzeugten CSS-Code für transition oder @keyframes direkt in Ihr Webprojekt.

Anwendungsfälle

Feinabstimmung von Micro-Interactions wie Button-Hover-Effekten mit elastischem Feedback.

Erstellung von flüssigen Page-Transitions durch exponentielle Easing-Kurven (ease-out-expo).

Optimierung von Lade-Spinner-Animationen durch präzise Kontrolle über die Beschleunigungsphase.

Beispiele

1. Elastischer Button-Hover-Effekt

Frontend-Entwickler

Hintergrund: Ein Entwickler möchte eine Schaltfläche beim Hovern leicht federn lassen, um das Interface lebendiger zu gestalten.
Problem: Die Standard-Easings von CSS bieten keinen elastischen Rücksprung (Bounce-Effekt).
Verwendung: Wählen Sie das Preset 'ease-out-back' oder geben Sie 'cubic-bezier(0.34, 1.56, 0.64, 1)' ein und setzen Sie die Dauer auf 600 ms.
Beispielkonfiguration: { "easing": "cubic-bezier(0.34, 1.56, 0.64, 1)", "preset": "ease-out-back", "duration": 600, "delay": 0 }
Ergebnis: Die Live-Vorschau zeigt das Überschwingen bei der Skalierung, und der fertige CSS-Code für den Übergang wird exportiert.

2. Sanftes Einblenden eines Overlays

UI-Designer

Hintergrund: Ein Designer plant ein modales Fenster, das sich extrem sanft öffnet und dabei einblendet.
Problem: Lineare Übergänge wirken unnatürlich und abrupt.
Verwendung: Wählen Sie das Preset 'ease-out-expo' und stellen Sie die Dauer auf 800 ms ein.
Beispielkonfiguration: { "easing": "cubic-bezier(0.16, 1, 0.3, 1)", "preset": "ease-out-expo", "duration": 800, "delay": 0 }
Ergebnis: Die Animation startet extrem schnell und bremst zum Ende hin sanft ab. Der CSS-Code für Deckkraft und Skalierung steht bereit.