Proprietà animation-timing-function CSS

Definizione e uso

funzione-di-tempo-di-animazione Definire la curva di velocità dell'animazione.

Le curve di velocità definiscono il tempo impiegato dall'animazione per passare da un insieme di stili CSS a un altro.

Le curve di velocità sono utilizzate per rendere più morbide le trasformazioni.

Vedere anche:

Corso CSS3:Animazione CSS

Manuale HTML DOM:Proprietà animationTimingFunction

Esempio

Esempio 1

Lascia che l'animazione venga riprodotta a velocità costante da inizio a fine:

div
{
funzione-di-tempo-di-animazione:2s;
}

Prova da solo

Esempio 2

Per comprendere meglio i valori delle funzioni di temporizzazione diverse, sono stati forniti cinque diversi elementi div con cinque valori diversi:

#div1 {funzione-di-tempo-di-animazione: lineare;}
#div2 {funzione-di-tempo-di-animazione: ease;}
#div3 {funzione-di-tempo-di-animazione: ease-in;}
#div4 {funzione-di-tempo-di-animazione: ease-out;}
#div5 {funzione-di-tempo-di-animazione: ease-in-out;}

Prova da solo

Esempio 3

Come nell'esempio precedente, ma definisce la curva di velocità tramite la funzione cubic-bezier:

#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

animation-timing-function: value;

L'attributo animation-timing-function utilizza la funzione matematica chiamata funzione cubica di Bezier (Cubic Bezier) per generare la curva di velocità. Puoi utilizzare valori propri o valori predefiniti:

Valore Descrizione Test
linear La velocità dell'animazione è la stessa da inizio a fine. Test
ease Predefinito. L'animazione inizia lentamente, poi accelera e si rallenta prima della fine. Test
ease-in L'animazione inizia lentamente. Test
ease-out L'animazione termina lentamente. Test
ease-in-out L'animazione inizia e termina lentamente. Test
cubic-bezier(n,n,n,n) Valori propri nella funzione cubic-bezier. I valori possibili sono numeri tra 0 e 1.

Suggerimento:Prova a utilizzare valori diversi nella funzione "Prova da solo" qui sotto.

Dettagli tecnici

Valore predefinito: ease
Ereditarietà: no
Versione: CSS3
Sintassi JavaScript: oggetto.style.animationTimingFunction="linear"

Supporto del browser

I numeri nella tabella indicano la versione iniziale del browser che supporta completamente l'attributo.

Con i numeri preceduti da -webkit-、-moz- o -o- si indica la versione iniziale del browser che utilizza il prefisso.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-