Cubic-Bezier-Editor

Funktionen von Cubic-Bezier-Editor

• 01

  Ziehe die Kurve, sieh die Bewegung

  Zwei draggbare Griffe kontrollieren den Start und das Ende der Bezier. Die begleitende Ball-Animation spielt die Kurve bei der von dir gewählten Dauer ab, damit du Overshoot und Ease-Out-Gefühl vorschauen kannst, ohne die Seite zu verlassen.

• 02

  Alle Standard-Presets

  Starte von CSS's eingebauten ease, linear, ease-in, ease-out und ease-in-out — dann verfeinere. Das Preset wechselt automatisch zu "custom", wenn du einen Griff bewegst.

• 03

  CSS mit einem Klick kopieren

  Der cubic-bezier()-Wert aktualisiert sich live mit zwei Dezimal-Präzision, bereit zum Einfügen in transition-timing-function oder animation-timing-function.

FAQ zu Cubic-Bezier-Editor

Warum können die Y-Werte über 1 oder unter 0 gehen?

Bezier-Kontrollpunkte außerhalb des 0–1-Bereichs erzeugen Overshoot- und Undershoot-Effekte — die Kurve geht vorbei an ihrem Endpunkt, bevor sie sich setzt. So werden "bouncy" Easing-Kurven gemacht; die X-Achse muss noch in 0–1 bleiben.

Wie verwende ich die Ausgabe?

Kopiere die cubic-bezier(...)-String und füge sie in jeden CSS-transition-timing-function oder animation-timing-function-Wert ein. Es funktioniert in jedem modernen Browser.

Ist die Vorschau präzise zu dem, was CSS macht?

Ja — die Vorschau animiert einen Ball von 0 zu 100% mit der gleichen Cubic-Bezier-Formel, die Browser für Transitions verwenden. Der Dauer-Slider lässt dich langsame vs. schnelle Kurven spüren, bevor du dich festlegst.

Was bedeutet ease-in-out tatsächlich?

Ease-in-out startet langsam, beschleunigt in der Mitte und verlangsamt sich am Ende wieder — die cubic-bezier(0.42, 0, 0.58, 1)-Kurve. Es ist das Standard für die meisten polierten UI-Bewegungen, weil es widerspiegelt, wie echte physische Objekte beschleunigen und abbremsen.