Cubic-Bezier-Editor

So nutzen Sie den Cubic-Bezier-Editor

1. Ziehen Sie die beiden Anfasser im Diagramm. P1 (der erste Kontrollpunkt) formt den Anfang der Bewegung, P2 das Ende. Die Zeit läuft von links nach rechts, der Fortschritt von unten nach oben.
2. Oder tippen Sie einen Wert in Wert für cubic-bezier() ein: ein vollständiges cubic-bezier(0.4, 0, 0.2, 1), vier Zahlen oder ein Schlüsselwort wie ease-in-out. Die Felder x1, y1, x2 und y2 ändern jeweils eine Koordinate.
3. Starten Sie mit dem Menü Vorlagen (CSS-Schlüsselwörter, die Familien von Sine bis Back und die Kurven von Material Design) oder mit den Schlüsselwort-Schaltflächen. Entspricht Ihre Kurve einer Vorlage, erscheint deren Name neben den Schaltflächen.
4. Beobachten Sie die Animationsvorschau: Der Punkt auf Ihre Kurve und der Punkt auf linear legen dieselbe Strecke in derselben Dauer zurück. Mit Pause/Abspielen und Neu starten vergleichen Sie beide.
5. Kopieren Sie das Ergebnis unter CSS-Timing-Funktion oder kopieren Sie die Näherung mit linear() und wählen Sie deren Anzahl an Segmenten.

Tastatur: Fokussieren Sie einen Anfasser und verschieben Sie ihn mit den Pfeiltasten um 0,01, mit gedrückter Umschalttaste um 0,1.

Ist Ihr System auf reduzierte Bewegung eingestellt, startet die Animation pausiert. Drücken Sie Abspielen, wenn Sie sie trotzdem sehen möchten. Alles läuft lokal in Ihrem Browser.

Was cubic-bezier() bedeutet

Eine CSS-Easing-Funktion ordnet der verstrichenen Zeit eines Übergangs (0 bis 1) seinen Fortschritt (0 bis 1) zu. cubic-bezier(x1, y1, x2, y2) beschreibt diese Zuordnung mit einer kubischen Bézierkurve, die bei (0, 0) beginnt, bei (1, 1) endet und von zwei Kontrollpunkten gezogen wird: P1 = (x1, y1) und P2 = (x2, y2).

• x-Werte sind Zeitpunkte und müssen zwischen 0 und 1 bleiben, sonst wäre die Funktion keine gültige Timing-Kurve. Der Editor hält sie in diesem Bereich.
• y-Werte sind Fortschritt und dürfen unter 0 oder über 1 liegen. Ein y über 1 lässt die Animation über ihr Ziel hinausschießen und zurückkommen, wie bei den Back-Kurven; unter 0 bewegt sie sich zuerst rückwärts.
• Eine steile Kurve bedeutet schnelle Bewegung, eine flache langsame. ease-out beginnt schnell und endet langsam, was sich für Elemente, die ins Bild kommen, natürlich anfühlt. ease-in macht das Gegenteil und passt zu Elementen, die verschwinden.

Die CSS-Schlüsselwörter sind Abkürzungen: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) und linear = (0, 0, 1, 1).

Die Näherung mit linear()

Die neuere Funktion linear() listet Fortschrittswerte zu gleichmäßig verteilten Zeitpunkten auf, z. B. linear(0, 0.25, 0.5, 0.75, 1), und verbindet sie mit geraden Linien. Das Tool tastet Ihre Kurve ab (es löst die Bézierkurve für jeden Zeitschritt) und schreibt die Werte mit drei Nachkommastellen. Mit 20 bis 40 Segmenten ist das Ergebnis optisch nicht von der Kurve zu unterscheiden. Der eigentliche Vorteil von linear() liegt bei Kurven, die eine Bézierkurve nicht zeichnen kann, etwa Abpraller und Federn – es erlaubt aber auch eine einheitliche Syntax. linear() funktioniert in Chrome und Edge ab 113, Firefox ab 112 und Safari ab 17.2. Behalten Sie den cubic-bezier()-Wert daher als Fallback.