CSS cubic-bezier() Funzione
❮ Riferimento alle funzioni CSS
Esempio
Un effetto di transizione con velocità variabile dall'inizio alla fine:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}
Definizione e utilizzo
La funzione cubic-bezier() definisce una curva di Bezier cubica.
Una curva di Bezier cubica è definita da quattro punti P0, P1, P2 e P3. P0 e P3 sono l'inizio e la fine della curva e, in CSS questi punti sono fissi in quanto le coordinate sono rapporti. P0 è (0, 0) e rappresenta il tempo iniziale e lo stato iniziale, P3 è (1, 1) e rappresenta il tempo finale e lo stato finale.
La funzione cubic-bezier() può essere utilizzata con la proprietà della funzione di temporizzazione dell'animazione e la proprietà della funzione di temporizzazione della transizione .
Versione: | CSS3 |
---|
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la funzione.
Function | |||||
---|---|---|---|---|---|
cubic-bezier() | 4.0 | 10.0 | 4.0 | 3.1 | 10.5 |
Sintassi 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 |
❮ Riferimento alle funzioni CSS