Cubic-Bézier-Easing-Editor
Gestalte eigene Cubic-Bézier-Easing-Kurven mit einem ziehbaren Editor und einer Live-Animationsvorschau.
Ziehe die beiden Griffe, um die Easing-Kurve zu formen.
transition-timing-function: —;
animation-timing-function: —;
Alles läuft in deinem Browser – es wird nichts hochgeladen.
Über Cubic-Bézier-Easing-Editor
Der Cubic-Bézier-Easing-Editor entwirft benutzerdefinierte Timing-Funktionen für CSS-Übergänge und -Animationen. Ziehen Sie die beiden Kontrollpunkte auf der Kurvenfläche, und der Wert cubic-bezier(x1, y1, x2, y2) aktualisiert sich live; eine Animationsvorschau spielt das Easing neben einer linearen Referenz ab, sodass Sie den Unterschied spüren können, mit einstellbarer Dauer und sofortiger Wiederholung.
Zehn Vorlagen decken das gängige Vokabular ab — die Standard-Easing-Funktionen ease, ease-in, ease-out und ease-in-out, dazu ausdrucksstarke Kurven wie back und anticipate, die über ihre Endpunkte hinausschießen, sowie material-artige Beschleunigungs- und Verzögerungsrampen. Nutzen Sie sie direkt oder als Ausgangspunkt für Ihre eigene Anpassung.
Sie können auch exakte Kontrollpunkt-Koordinaten eingeben, auf zufällig klicken für Inspiration und entweder den reinen cubic-bezier()-Wert oder eine fertige CSS-Regel kopieren. Der gesamte Editor läuft in Ihrem Browser.
So verwenden Sie Cubic-Bézier-Easing-Editor
- Ziehen Sie die beiden Griffe im Kurveneditor, um das Easing zu formen.
- Klicken Sie auf Wiederholen und vergleichen Sie die geeaste Animation mit der linearen Referenz, passen Sie bei Bedarf die Dauer an.
- Probieren Sie die Vorlagen aus — ease, back, anticipate, material und mehr — für einen schnellen Ausgangspunkt.
- Feinjustieren Sie mit den numerischen Kontrollpunkt-Eingaben für exakte Werte.
- Kopieren Sie den cubic-bezier()-Wert oder das komplette CSS-Snippet.