Generatore di curve cubic-bezier

La curva di accelerazione (timing function) decide come avanza nel tempo una transizione o un'animazione CSS. Trascina i due punti di controllo, prova il risultato nell'animazione di esempio e copia il valore cubic-bezier().

Che cos'è cubic-bezier()?

Le proprietà transition-timing-function e animation-timing-function (o il terzo valore di transition) indicano come si distribuisce il cambiamento lungo la durata. cubic-bezier(x1, y1, x2, y2) definisce una curva di Bézier cubica che inizia in (0, 0) e finisce in (1, 1) con due punti di controllo: l'asse X è il tempo e l'asse Y l'avanzamento.

Le parole chiave del CSS sono curve predefinite: ease equivale a cubic-bezier(0.25, 0.1, 0.25, 1), ease-in a (0.42, 0, 1, 1), ease-out a (0, 0, 0.58, 1) ed ease-in-out a (0.42, 0, 0.58, 1). Le easeIn…/easeOut… sono le classiche curve di Robert Penner, molto usate nelle librerie di animazione.

Consigli

I valori X devono essere compresi tra 0 e 1, ma quelli Y possono uscirne: sotto 0 o sopra 1 l'animazione «va oltre» e torna indietro, un leggero effetto rimbalzo come quello di easeOutBack. Per gli elementi che compaiono sullo schermo funzionano meglio le curve di uscita (ease-out), che partono veloci e frenano alla fine; per quelli che se ne vanno, quelle di entrata (ease-in).

Le durate da 150 a 400 ms sono le più comuni nelle interfacce. Ricorda di rispettare la preferenza prefers-reduced-motion di chi preferisce meno animazioni.