Proprietà transition-timing-function

La proprietà transition-timing-function imposta la velocità di cambiamento (accelerazione) della transizione fluida transition. Ad esempio, prima lentamente, poi velocemente, poi lentamente e così via.

Sintassi

cssselettore {
  transition-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 velocemente 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 `transition-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:

Esempio

Passa il mouse sul blocco - cambierà gradualmente la sua larghezza in 2 secondi. Poiché è impostato il valore ease-in, l'animazione inizierà lentamente e accelererà gradualmente:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  transition-timing-function: ease-in;
  transition-duration: 2s;
  transition-property: width;
  height: 50px;
  width: 100px;
}
#elem:hover {
  width: 400px;
}

Результат:

Vedi anche

la proprietà transition-duration,
che imposta la durata della transizione fluida
la proprietà transition-property,
che imposta il nome della proprietà per la transizione fluida
la proprietà transition-delay,
che imposta il ritardo prima della transizione fluida
la proprietà transition,
che è la forma abbreviata per la transizione fluida
la proprietà animation,
con cui si può creare un'animazione