Cubic-Bezier-Editor

Ziehe die beiden Kontrollpunkte auf der Kurve, um ein eigenes Easing zu formen, oder starte mit einem Preset wie ease-in-out und passe es von dort aus an. Die vier Zahlenfelder bleiben mit den Griffpunkten synchron, du kannst die Werte also per Hand oder nach Augenmaß feinjustieren. Eine Vorschau-Animation spielt dein Easing neben einer linearen Referenz ab, wodurch gut sichtbar wird, wie stark die Kurve die Bewegung gegenüber einem gleichmäßigen Tempo beschleunigt oder abbremst.

Wie funktioniert der Kurveneditor?

Ein CSS-cubic-bezier()-Easing wird durch zwei Kontrollpunkte definiert, (x1, y1) und (x2, y2), während Anfang und Ende der Kurve fest bei (0,0) und (1,1) liegen. Die x-Koordinaten stehen für die Zeit und bleiben immer im von CSS geforderten Bereich zwischen 0 und 1, die y-Koordinaten stehen dagegen für den Fortschritt und dürfen in diesem Editor darüber hinausgehen (etwa von -1 bis 2). So lässt sich ein Overshoot-Effekt entwerfen, bei dem die Bewegung über ihr Ziel hinausschießt, bevor sie sich einpendelt, wie bei den eingebauten Presets ease-in-back und ease-out-back. Im Hintergrund wertet das Tool die Kurve genauso aus wie ein Browser: Für einen gegebenen Zeitpunkt wird der passende Punkt auf der Kurve über mehrere Runden des Newton-Verfahrens bestimmt, mit einer Bisektion als Rückfallebene, falls die Kurve zu flach ist, damit Newton schnell konvergiert.

Du kannst außerdem einen cubic-bezier(...)-Wert direkt in die Zahlenfelder einfügen, das Tool wandelt ihn dann zurück in ziehbare Griffpunkte, solange die x-Werte im gültigen Bereich von 0 bis 1 liegen.

Wird etwas von dem, was ich zeichne, hochgeladen?

Nein. Der Kurveneditor, die Mathematik dahinter und die Vorschau-Animation laufen vollständig in deinem Browser. Nichts, was du zeichnest, wird irgendwohin hochgeladen, ein Server ist an keiner Stelle beteiligt.

Damit lassen sich CSS-Transitions und -Animationen feinabstimmen: ein knackiges ease-out für einen Button-Klick, ein federndes Overshoot für das Erscheinen eines Modals, oder eine eigene Kurve passend zur Motion-Spezifikation eines Design-Tools. Den fertigen cubic-bezier()-Wert kopierst du direkt ins Stylesheet. In der MDN-Referenz zu easing-function steht, wie sie mit transition-timing-function und animation-timing-function zusammenspielt, die genaue Syntax in der Referenz zur Funktion cubic-bezier().