Differenza tra la facilità di ingresso e l'uscita delle transizioni CSS3

Question

Qual è la differenza tra le transizioni CSS3 'ease-in, ease-out, ecc.?

Answer 1

Le transizioni e le animazioni di CSS3 supportano l'alleggerimento, formalmente chiamato "funzione di temporizzazione". I comuni sono ease-in, ease-out, ease-in-out, ease e linear, oppure è possibile specificare il proprio utilizzando cubic-bezier().

• ease-in avvia l'animazione lentamente e termina a piena velocità.
• ease-out avvia l'animazione a tutta velocità, quindi termina lentamente.
• ease-in-out inizierà lentamente, sarà il più veloce al centro dell'animazione, quindi terminerà lentamente.
• ease è come ease-in-out, eccetto che inizia leggermente più veloce di quanto non duri.
• linear non utilizza alcun andamento.
• Infine, here's a great description della sintassi cubic-bezier, ma di solito non è necessario a meno che non si desideri ottenere effetti molto precisi.

Fondamentalmente, l'attenuazione è rallentare fino a fermarsi, l'allentamento è quello di accelerare lentamente, e lineare non è quello di fare né l'uno né l'altro. Puoi trovare risorse più dettagliate allo documentation for timing-function on MDN.

E se vuoi i precisi effetti precisi, lo straordinario Lea Verou cubic-bezier.com è lì per te! È anche utile per confrontare graficamente le diverse funzioni di temporizzazione.

Un altro, the steps() timing function, si comporta come linear, ma esegue solo un numero finito di passaggi tra l'inizio della transizione e la sua fine. steps() mi è stato molto utile nelle animazioni CSS3, piuttosto che nelle transizioni; un buon esempio è nel caricare indicatori con punti. Tradizionalmente, si usa una serie di immagini statiche (diciamo otto punti, due cambiando colore per ogni fotogramma) per produrre l'illusione del movimento. Con un'animazione steps(8) e una trasformazione rotate, stai usando il movimento per produrre l'illusione di fotogrammi separati! Che divertimento