CSS cubic-bezier()-Funktion
Beispiel
Verschiedene Geschwindigkeitsübergangseffekte von Anfang bis Ende:
Selbst ausprobieren »
Definition und Verwendung
Die Funktion cubic-bezier() definiert eine kubische Bézier-Kurve.
Die Bézier-Kurve wird durch vier Punkte P0, P1, P2 und P3 definiert. P0 und P3 sind Anfangs- und Endpunkt der Kurve. P0 ist (0,0) und repräsentiert die Anfangszeit und den Anfangszustand, während P3 (1,1) ist und die Endzeit und den Endzustand repräsentiert.
Aus der obigen Abbildung müssen wir den Wertebereich von cubic-bezier kennen:
P0：默认值 (0, 0) P1：动态取值 (x1, y1) P2：动态取值 (x2, y2) P3：默认值 (1, 1)
Wir müssen uns auf die Werte der Punkte P1 und P2 konzentrieren. Der Wertebereich der X-Achse ist 0 bis 1; wenn der Wert diesen Bereich überschreitet, wird cubic-bezier ungültig. Für die Werte der Y-Achse gibt es keinen festgelegten Bereich, und sie müssen natürlich auch nicht zu groß sein.
Die direkteste Vorstellung ist, eine Gerade in eine Koordinatenachse mit einem Bereich von nur 1 zu legen und zwei Punkte aus der Mitte zu nehmen, um daran zu ziehen (der Wertebereich der X-Achse ist [0, 1], während die Y-Achse beliebig ist). Die resultierende Kurve ist die Animationsgeschwindigkeitskurve.
cubic-bezier() kann füranimation-timing-functionundtransition-timing-function verwendet werdenEigenschaft.
Unterstützte Version: CSS3
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browser-Versionsnummer an, die diese Funktion unterstützt.
| Funktion | |||||
|---|---|---|---|---|---|
| cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS-Syntax
cubic-bezier(x1,y1,x2,y2)
| Wert | Beschreibung |
|---|---|
| x1,y1,x2,y2 | Erforderlich. Numerische Werte. x1 und x2 müssen Zahlen zwischen 0 und 1 sein. |
Weitere Erweiterungen