Wichtigste Erkenntnisse
- 01Ziehen Sie die beiden Kontrollpunkt-Griffe, um die Easing-Kurve visuell zu gestalten, anstatt numerische Werte zu erraten.
- 02Eine Live-Ball-Animation spielt das Timing ab, damit Sie die Bewegung spüren können, bevor Sie sich festlegen.
- 03Alle fünf vordefinierten CSS-Easing-Funktionen (ease, linear, ease-in, ease-out, ease-in-out) sind als Ausgangspunkte verfügbar.
- 04Der cubic-bezier()-Wert wird live mit zwei Dezimalstellen aktualisiert und kann in jede CSS-Eigenschaft eingefügt werden.
Warum benutzerdefinierte Easing-Kurven für UI-Bewegungen wichtig sind
Die vordefinierten Timing-Funktionen von CSS – ease, ease-in-out, linear – decken viel ab, aber jede Benutzeroberfläche hat Momente, in denen die Standardeinstellung sich leicht falsch anfühlt. Ein Tooltip, der zu schnell erscheint, ein Modal, das beim Öffnen zu weit schießt, eine Fortschrittsleiste, die sich mechanisch anfühlt. Mit Cubic-Bezier-Kurven können Sie die Bewegung so abstimmen, dass sie sich natürlich anfühlt, nicht mechanisch – aber die vier Zahlen in cubic-bezier(0.4, 0, 0.2, 1) sind fast unmöglich direkt zu verstehen.
Der Cubic-Bezier-Editor von Handytool verwandelt diese Zahlen in eine visuelle Kurve mit zwei verschiebbaren Griffen. Verschieben Sie einen Griff und die Ball-Animation wird sofort abgespielt, sodass Sie iterieren können, bis die Bewegung Ihrer Absicht entspricht. Kopieren Sie dann den Wert und fügen Sie ihn in Ihr CSS ein – fertig.
So entwerfen Sie eine CSS-Easing-Kurve
- 01
Beginnen Sie mit einer Voreinstellung
Wählen Sie ease, linear, ease-in, ease-out oder ease-in-out als Grundlage. Die Griffe rasten an den korrekten Positionen für jede Voreinstellung ein.
- 02
Ziehen Sie die Kontrollpunkt-Griffe
Jeder Griff steuert ein Ende der Kurve – der Start-Griff formt die anfängliche Beschleunigung, der End-Griff formt die endgültige Verzögerung. Das Verschieben eines Griffes schaltet die Voreinstellung automatisch auf 'Benutzerdefiniert' um.
- 03
Beobachten Sie die Ball-Animation
Ein Ball animiert von links nach rechts mit Ihrer Kurve. Passen Sie den Dauer-Schieberegler an, um langsame vs. schnelle Übergänge in der Vorschau anzusehen.
- 04
Experimentieren Sie mit Overshoot
Ziehen Sie einen Y-Achsen-Griff über 1 oder unter 0, um Overshoot und Undershoot zu erstellen – den 'federnden' Effekt, der ein Menü energisch aufspringen lässt.
- 05
Kopieren Sie den CSS-Wert
Klicken Sie auf Kopieren, um die cubic-bezier()-Zeichenkette zu erfassen und in transition-timing-function oder animation-timing-function in Ihrem Stylesheet einzufügen.
Läuft vollständig in Ihrem Browser
Der Editor ist ein eigenständiges Browser-Tool – nach dem Öffnen der Seite werden keine Schriftarten, Skripte oder Daten geladen. Das Ziehen von Griffen und die Vorschau von Animationen funktioniert offline. Die für die Vorschau-Ball verwendete Cubic-Bezier-Formel ist dieselbe, die Browser für CSS-Übergänge verwenden, sodass das, was Sie im Editor sehen, genau das ist, was Ihr Stylesheet produziert.
Es gibt nichts zu installieren und nichts, wofür Sie sich anmelden müssen. Die Ausgabe ist ein einzelner CSS-Wert – fügen Sie ihn ein und Sie sind fertig.
Häufig gestellte Fragen zum Cubic-Bezier-Editor
Was ist eine Cubic-Bezier-Easing-Kurve?
Es ist eine mathematische Kurve, die durch zwei Kontrollpunkte definiert wird und bestimmt, wie ein CSS-Übergang oder eine Animation im Laufe der Zeit beschleunigt. Die vier Zahlen in cubic-bezier(x1, y1, x2, y2) legen die Positionen dieser Kontrollpunkte fest.
Warum können die Y-Werte über 1 oder unter 0 gehen?
Y-Werte außerhalb von 0–1 erzeugen Overshoot und Undershoot – die Kurve geht über ihren Endpunkt hinaus, bevor sie sich einpendelt. Dies erzeugt 'federnde' Easing-Kurven. Die X-Werte müssen im Bereich 0–1 bleiben.
Wie verwende ich die Ausgabe?
Kopieren Sie die cubic-bezier(...)-Zeichenkette und fügen Sie sie in einen beliebigen CSS-Wert für transition-timing-function oder animation-timing-function ein. Es funktioniert in jedem modernen Browser.
Was bedeutet ease-in-out eigentlich?
Ease-in-out beginnt langsam, beschleunigt in der Mitte und verlangsamt sich am Ende – cubic-bezier(0.42, 0, 0.58, 1). Es spiegelt wider, wie echte Objekte beschleunigen und verlangsamen, und ist die Standardwahl für die meisten polierten UI-Bewegungen.
Ist die Ball-Animationsvorschau genau wie CSS?
Ja – die Vorschau verwendet die gleiche Cubic-Bezier-Formel, die Browser auf CSS-Übergänge anwenden. Mit dem Dauer-Schieberegler können Sie langsame vs. schnelle Kurven spüren, bevor Sie sich festlegen.