CSS -cubic-bezier()- Funktion
Beispiel
Ein Übergangseffekt mit variabler Geschwindigkeit von Anfang bis Ende:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definition und Verwendung
Die Funktioncubic-bezier() definiert eine kubische Bezier-Kurve.
Eine kubische Bezier-Kurve wird durch vier Punkte P0, P1, P2 und P3 definiert. P0 und P3 sind der Anfang und das Ende der Kurve und in CSS sind diese Punkte fest, da die Koordinaten Verhältnisse sind. P0 ist (0, 0) und repräsentiert die Anfangszeit und den Anfangszustand, P3 ist (1, 1) und repräsentiert die Endzeit und den Endzustand.
Die Funktion cube-bezier() kann mit der Eigenschaft animation-timing-function und der Eigenschaft transition-timing-function verwendet werden .
Ausführung: | CSS3 |
---|
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Funktion vollständig unterstützt.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
CSS-Syntax
cubic-bezier(x1,y1,x2,y2)
Value | Description |
---|---|
x1,y1,x2,y2 | Required. Numeric values. x1 and x2 must be a number from 0 to 1 |