HTML, CSS & Frontend-Code
Ziehen Sie die Punkte oder geben Sie vier Zahlen ein; gültige Kurven lassen sich als CSS kopieren.
Kontrollpunkte ziehen oder mit Pfeiltasten bewegen; mit Umschalt geht es in größeren Schritten.
cubic-bezier(0.25, 0.1, 0.25, 1)Die Eingabe bleibt in diesem Browser und wird nicht an einen Server gesendet.
Die gestrichelte Diagonale zeigt eine konstante Geschwindigkeit.
Kurve aktualisiert.
Wirkt ein Übergang träge oder abrupt, lohnt ein Blick auf Anfang und Ende der Bewegung. Der Cubic-Bezier-Generator macht beide Kontrollpunkte direkt veränderbar. Beginnen Sie mit ease-out oder einem anderen Preset und passen Sie die Kurve an Ihr Element an.
Eine vorhandene cubic-bezier()-Funktion kann eingefügt werden. Vergleichen Sie CSS-Easing-Kurven mit der linearen Referenz und starten Sie die Animations-Vorschau bei der geplanten Dauer, bevor Sie die Werte in Ihr Stylesheet übernehmen.
Kontrollpunkte, Zahlen und Browserbewegung bleiben nachvollziehbar verbunden.
Die beiden Kontrollpunkte und die vier Zahlenfelder bearbeiten dieselbe Kurve. Im Cubic-Bezier-Generator können Sie eine vorhandene Funktion laden; eingegebene Dezimalstellen werden nicht stillschweigend auf zwei Stellen gekürzt.
CSS begrenzt X1 und X2 auf 0 bis 1, lässt Y aber außerhalb dieses Intervalls zu. Der Cubic-Bezier-Generator stoppt beim Ziehen am X-Rand. Ein zu großer getippter X-Wert bleibt zur Korrektur stehen; Y über 1 darf einmaliges Überschwingen erzeugen.
Für eintretende Elemente ist ease-out ein Ausgangspunkt, für allgemeine Zustandswechsel können Sie ease und Material-Standard vergleichen. Die Auswahl setzt alle vier Zahlen; nach einer Änderung steht das Preset auf benutzerdefiniert.
Der erste Kontrollpunkt beeinflusst vor allem den Beginn, der zweite das Auslaufen. Beim Ziehen bleibt X innerhalb 0 bis 1. Ein getippter Wert außerhalb wird gemeldet, während negative Y-Werte und Y über 1 gültig bleiben.
Die Vorschau startet mit 1000 ms und läuft nur auf Klick. Ihre Dauer wird nicht Teil der kopierten Funktion. Ist die automatische Aktualisierung aus, erzeugt auch Strg/Cmd+Enter ein neues Ergebnis.
Drag, Pfeiltasten, Zahlenfelder und Funktionsimport ändern dieselben Koordinaten. Die optional eingeblendete lineare Referenz zeigt, wo die aktuelle Kurve gegenüber gleichmäßiger Bewegung vor- oder zurückliegt.
Die Animations-Vorschau verwendet die erzeugte cubic-bezier()-Funktion direkt als Timingfunktion des Browsers. Sie berechnet die Zeit nicht fälschlich aus dem Kurvenparameter und wiederholt die Bewegung nicht automatisch.
Kopieren Sie nur die Funktion oder eine vollständige transition-timing-function-Deklaration. Sobald Eingaben oder Optionen geändert wurden, sind beide Kopieraktionen bis zur Aktualisierung deaktiviert.
X1, Y1, X2 und Y2 sind die Koordinaten zweier Kontrollpunkte. Anfang (0,0) und Ende (1,1) stehen fest. X beschreibt die Eingabezeit, Y den erreichten Fortschritt.
Für auftauchende Elemente und direkte Reaktionen ist ease-out oft ein guter Start, weil die Bewegung sofort beginnt und dann abbremst. Vergleichen Sie es mit Material-Standard bei der tatsächlich geplanten Dauer.
Beide bremsen am Ende. ease beginnt zusätzlich sanft, während ease-out sofort merklich in Bewegung kommt. Für einen Eintritt wirkt ease-out daher häufig reaktionsfreudiger.
Setzen Sie Y2 über 1 oder wählen Sie das Preset für einmaliges Überschwingen. Eine einzelne cubic-bezier()-Funktion liefert keinen mehrfachen Bounce; dafür brauchen Sie Keyframes oder eine Federberechnung.
Ja. Setzen Sie die kopierte Funktion als animation-timing-function oder in die animation-Kurzform. Dieser Generator erstellt weder Keyframes noch Dauer, Verzögerung oder Wiederholungen.
Noch eine Frage?
Laden Sie eine vorhandene Kurve, spielen Sie sie mit passender Dauer ab und kopieren Sie den gültigen Wert. Der Cubic-Bezier-Generator zeigt Punkte und Zahlen während der Feinabstimmung zusammen.