Corso raccomandato:

Funzione cubic-bezier() di CSS

Definizione e uso di CSS cubic-bezier() La funzione viene utilizzata per definire la curva di cubic-bezier.

La curva di cubic-bezier è definita da quattro punti P0, P1, P2 e P3. In CSS, P0 e P3 sono l'inizio e la fine della curva e le coordinate di questi punti sono ratio fisse. P0 è (0, 0), che rappresenta il tempo iniziale e lo stato iniziale; P3 è (1, 1), che rappresenta il tempo finale e lo stato finale.

cubic-bezier() La funzione può essere utilizzata con animation-timing-function Proprietà e transition-timing-function Proprietà insieme utilizzate.

Esempio

Esempio 1

Un effetto di transizione dalla velocità iniziale a quella finale variabile:

div {
  larghezza: 100px;
  altezza: 100px;
  sfondo: rosso;
  transition: larghezza 2s;
  transition-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

Prova da solo

Esempio 2

Mostra l'elemento <div> con valori di velocità di cubic-bezier diversi:

#div1 {animation-timing-function: cubic-bezier(0,0,1,1);}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Prova da solo

Sintassi CSS

cubic-bezier(x1,y1,x2,y2)

Dettagli tecnici

Supporto del browser

Tabella dei numeri rappresenta la versione del browser che supporta completamente la funzione per la prima volta.

Pagine correlate

Riferimento:Proprietà animation-timing-function CSS

Riferimento:Proprietà CSS transition-timing-function