Differenza tra la facilità di entrata e di uscita delle transizioni CSS3

Qual è la differenza tra le transizioni CSS3 ease-in, ease-outecc?

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

• ease-in inizierà l'animazione lentamente e finirà a piena velocità.
• ease-out inizierà l'animazione a piena velocità, quindi finirà lentamente.
• ease-in-out inizierà lentamente, sarà il più veloce al centro dell'animazione, quindi finirà lentamente.
• easeè come ease-in-out, tranne che inizia leggermente più velocemente di quanto finisce.
• linear non utilizza alcun allentamento.
• Infine, ecco un'ottima descrizione della cubic-beziersintassi, ma di solito non è necessaria a meno che tu non voglia alcuni effetti molto precisi.

Fondamentalmente, l'allentamento in uscita è rallentare fino a fermarsi, l'allentamento in entrata è accelerare lentamente e lineare è non fare né l'uno né l'altro. Puoi trovare risorse più dettagliate nella documentazione per timing-functionsu MDN .

E se vuoi gli effetti precisi di cui sopra, il fantastico cubic-bezier.com di Lea Verou è lì per te! È anche utile per confrontare graficamente le diverse funzioni di temporizzazione.

Un altro, la steps()funzione di temporizzazione , agisce come linear, ma esegue solo un numero finito di passaggi tra l'inizio e la fine della transizione. steps()mi è stato molto utile nelle animazioni CSS3, piuttosto che nelle transizioni; un buon esempio è il caricamento degli indicatori con i punti. Tradizionalmente, si usa una serie di immagini statiche (diciamo otto punti, due che cambiano colore per ogni fotogramma) per produrre l'illusione del movimento. Con steps(8)un'animazione e una rotatetrasformazione, stai usando il movimento per produrre l'illusione di fotogrammi separati! Quanto è divertente.