Funkce CSS cubic-bezier().
Příklad
Přechodový efekt s proměnnou rychlostí od začátku do konce:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definice a použití
Funkce cubic-bezier() definuje kubickou Bezierovu křivku.
Kubická Bezierova křivka je definována čtyřmi body P0, P1, P2 a P3. P0 a P3 jsou začátek a konec křivky a v CSS jsou tyto body pevné, protože souřadnice jsou poměry. P0 je (0, 0) a představuje počáteční čas a počáteční stav, P3 je (1, 1) a představuje konečný čas a konečný stav.
Funkci cubic-bezier() lze použít s vlastností animation-timing-function a vlastností transition-timing-function .
Verze: | CSS3 |
---|
Podpora prohlížeče
Čísla v tabulce určují první verzi prohlížeče, která tuto funkci plně podporuje.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
Syntaxe 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 |