Funzioni di easing: ease, linear, cubic-bezier

Una funzione di easing controlla la curva di velocità di una transizione o di un'animazione, cioè la rapidità con cui accelera o decelera durante la sua durata.

linear mantiene una velocità costante per tutta la durata della transizione. È utile per barre di caricamento e indicatori di avanzamento, quando ci si aspetta un movimento regolare.

ease inizia rapidamente e poi rallenta verso la fine. È il valore predefinito e risulta naturale per la maggior parte delle transizioni dell'interfaccia.

ease-in inizia lentamente e accelera. È adatto agli elementi che escono dallo schermo, nelle animazioni di uscita.

ease-out inizia rapidamente e decelera. È ideale per gli elementi che entrano nello schermo: arrivano con energia e si stabilizzano gradualmente.

ease-in-out inizia e termina lentamente, con un movimento più rapido nella parte centrale. È ideale per le animazioni cicliche o avanti e indietro.

Definisce una curva Bézier cubica personalizzata con quattro punti di controllo. Consente di creare curve di easing simili a una molla e altre curve personalizzate.

I quattro valori definiscono due punti di controllo: cubic-bezier(x1, y1, x2, y2). Valori superiori a 1 sull'asse y creano effetti di oltrepassamento, simili a una molla. Utilizzi strumenti come easings.net per visualizzare le curve.

steps(n, direction) divide l'animazione in n passaggi discreti di uguale durata. È perfetta per le animazioni degli sprite e gli effetti macchina da scrivere.

Il secondo argomento controlla il punto in cui avviene il passaggio:

• jump-start: primo passaggio al tempo 0
• jump-end: ultimo passaggio al termine (predefinito)
• jump-both: passaggi sia all'inizio sia alla fine
• jump-none: nessun passaggio alle estremità

La nuova funzione linear() consente di definire curve di easing arbitrarie attraverso più punti, rendendo possibili effetti di tipo molla e rimbalzo in puro CSS, senza i limiti di cubic-bezier.

Le funzioni di easing controllano le curve di velocità delle animazioni. Le opzioni integrate sono: linear, ease, ease-in, ease-out, ease-in-out. Per le curve personalizzate si utilizza cubic-bezier(). I passaggi discreti utilizzano steps(). La nuova funzione linear() consente di creare curve complesse simili a una molla.