Proprietà animation-timing-function

La proprietà animation-timing-function imposta la velocità di variazione (accelerazione) dell'animazione. Ad esempio, prima lentamente, poi velocemente, poi di nuovo lentamente, ecc.

Sintassi

selettore {
	animation-timing-function: valore;
}

Valori

Valore	Descrizione
`ease`	Prima lentamente, poi velocemente, alla fine di nuovo lentamente.
`ease-in`	Inizia lentamente e accelera gradualmente.
`ease-out`	Inizia rapidamente e si ferma gradualmente.
`ease-in-out`	Prima lentamente, poi velocemente, alla fine di nuovo lentamente. Si differenzia da ease per la velocità.
`linear`	Sempre la stessa velocità.
`step-start`	Nessuna animazione, la proprietà assume immediatamente il valore finale.
`step-end`	Nessuna animazione, la proprietà attende il tempo impostato in `animation-duraton`, e poi assume istantaneamente il valore finale.
`steps`	Il valore della proprietà cambia a scatti.
`cubic-bezier`	Curva di Bézier, che può definire un'animazione arbitraria. Vedi generatore di curve di Bézier.

Valore predefinito: ease.

Confronto tra i diversi valori

Passa il mouse sui blocchi mostrati di seguito per vedere il funzionamento di tutti i tipi di funzioni di temporizzazione:

Vedi anche

la proprietà animation,
che è una proprietà abbreviata per le animazioni
la regola @keyframes,
che definisce i fotogrammi chiave dell'animazione
le transizioni fluide transition, che rappresentano un'animazione al passaggio del mouse sull'elemento