Cubic-Bézier-Editor

Kontrollpunkte ziehen, genaue Werte eintippen und die Transition abspielen, bevor die erzeugte cubic-bezier()-Deklaration kopiert wird.

Läuft lokal in deinem Browser

Kategorie ansehen: Frontend & Design (34)

· cubic-bezier() · CSS timing

01P1 · P2

P1 xP1 yP2 xP2 y

Eine cubic-bezier()-Kurve formen und die CSS-Deklaration kopieren

Der Editor setzt vier Kontrollpunkte (x1, y1, x2, y2) in eine cubic-bezier()-Funktion um, zeichnet die zugehörige Timing-Kurve und spielt eine echte CSS-Transition damit ab. Kurve, Code und Vorschau entstehen in der Seite: die Funktion wird lokal zusammengesetzt, und kein Wert wird hochgeladen.

x1 und x2 bleiben wie in der CSS-Grammatik gefordert zwischen 0 und 1; y1 und y2 erlauben −2 bis 2, damit auch Überschwinger möglich sind. Die Fläche zeigt das übliche Fenster von −0,5 bis 1,5 und dehnt sich, sobald ein Kontrollpunkt darüber hinausgeht — kein Punkt fällt aus der Zeichnung.

Wähle eine Voreinstellung (ease, linear, ease-in, ease-out, ease-in-out oder overshoot) oder ziehe P1 und P2 auf der Fläche. Das Ziehen beginnt nur, wenn der Zeiger auf einem Punkt landet; ein Klick daneben bewegt nichts.

Für exakte Werte x1, y1, x2 und y2 eintippen. Die Felder nehmen Nachkommastellen und negative Zahlen an; beim Bestätigen mit Enter oder beim Verlassen des Felds wird der Wert auf zwei Nachkommastellen gerundet und in seinen Bereich geklemmt (x: 0–1, y: −2–2).

Stelle die Dauer ein, 100–5000 ms. Sie steht so im kopierten CSS und bestimmt, wie lange der Punkt beim Abspielen über die Spur läuft.

Animation abspielen lässt den Punkt mit der aktuellen Kurve laufen. Der Punkt nutzt eine echte CSS-Transition und zeigt damit die Interpolation des Browsers statt einer gezeichneten Näherung.

CSS kopieren legt die erzeugte Regel in die Zwischenablage; Zurücksetzen stellt die Vorgaben x1 0.25, y1 0.1, x2 0.25, y2 1 und 900 ms wieder her.

Kontrollpunkte, Kurvenfläche und erzeugte Transition

Was im kopierten CSS steht

Der Block ist eine einzige Regel — .animated-element { transition: transform <Dauer>ms cubic-bezier(x1, y1, x2, y2); } —, Selektor und animierte Eigenschaft sind also Platzhalter, die du durch deine eigenen ersetzt; die Timing-Funktion kommt von hier. Die vier Zahlen werden auf zwei Nachkommastellen gerundet, genau wie im Codefeld.

Codefeld, die auf den Punkt angewendete Beschleunigung und die Kurvenzeichnung lesen dieselben vier Felder, deshalb kann die Vorschau nicht von der kopierten Deklaration abweichen.

Wie die Kurvenfläche aufgebaut ist

Die x-Achse läuft über 0–1, die y-Achse zeigt das Timing-Fenster; senkrechte Linien markieren Viertel von x, waagerechte Linien alle 0,5 von y im sichtbaren Bereich. Beide Kontrollpunkte werden an ihren Koordinaten gezeichnet, die Kurve ist die kubische durch (0,0), die beiden Griffe und (1,1).

Standardmäßig ist der sichtbare y-Bereich −0,5 bis 1,5. Geht ein Kontrollpunkt darüber hinaus — die Voreinstellung overshoot setzt y1 auf 1.56, die Felder erlauben bis 2 —, weitet sich das Fenster gerade so weit, dass Punkt und Kurvenstück sichtbar bleiben statt abgeschnitten zu werden.

Grenzen, Vorgaben und lokale Verarbeitung

x-Werte werden auf 0–1 geklemmt, y-Werte auf −2–2, die Dauer auf 100–5000 ms, und die Zahlen werden auf zwei Nachkommastellen gerundet. Die Voreinstellungsliste wechselt auf Benutzerdefiniert, sobald ein Wert von Hand oder per Ziehen geändert wird — so zeigt das Menü nie eine Kurve, die in den Feldern nicht mehr steht.

Es wird nichts hochgeladen: Nach dem Laden der Seite haben Voreinstellungen wählen, Ziehen, Tippen, Abspielen, Kopieren und Zurücksetzen in den Testläufen (en, fr, ja) keine einzige Netzwerkanfrage ausgelöst. Die Vorschau nutzt die CSS-Transition-Implementierung des Browsers und funktioniert deshalb auch offline.