CSS sześcienny-bezier() Funkcja
Przykład
Efekt przejścia ze zmienną prędkością od początku do końca:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definicja i użycie
Funkcja cubic-bezier() definiuje krzywą Cubic Bezier.
Krzywa Beziera sześciennego jest zdefiniowana przez cztery punkty P0, P1, P2 i P3. P0 i P3 to początek i koniec krzywej, aw CSS punkty te są ustalone, ponieważ współrzędne są współczynnikami. P0 to (0, 0) i reprezentuje czas początkowy i stan początkowy, P3 to (1, 1) i reprezentuje czas końcowy i stan końcowy.
Funkcja cubic-bezier() może być używana z właściwością animacja-timing-function i przejściowy-timing-function .
Wersja: | CSS3 |
---|
Obsługa przeglądarki
Liczby w tabeli określają pierwszą wersję przeglądarki, która w pełni obsługuje tę funkcję.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
Składnia CSS
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 |