Editor cubic-bezier

Come usare l’editor cubic-bezier

1. Trascina le due maniglie sul grafico. P1 (il primo punto di controllo) modella l’inizio del movimento, P2 la fine. Il tempo scorre da sinistra a destra e l’avanzamento dal basso verso l’alto.
2. Oppure scrivi un valore in Valore cubic-bezier(): un cubic-bezier(0.4, 0, 0.2, 1) completo, quattro numeri o una parola chiave come ease-in-out. I campi x1, y1, x2 e y2 modificano una coordinata alla volta.
3. Parti dal menu Modelli (parole chiave CSS, le famiglie da Sine a Back e le curve di Material Design) o dai pulsanti delle parole chiave. Quando la tua curva coincide con un modello, il suo nome compare accanto ai pulsanti.
4. Osserva l’Anteprima dell’animazione: il punto su La tua curva e quello su linear percorrono la stessa distanza nella stessa Durata. Usa Pausa/Avvia e Ricomincia per confrontarli.
5. Copia il risultato da Funzione di temporizzazione CSS, oppure copia l’Approssimazione linear() scegliendone il numero di Segmenti.

Da tastiera: seleziona una maniglia e usa i tasti freccia per spostarla di 0,01, o di 0,1 con Maiusc.

Se il tuo sistema è impostato per ridurre il movimento, l’animazione parte in pausa. Premi Avvia se vuoi eseguirla comunque.

Cosa significa cubic-bezier()

Una funzione di easing CSS associa il tempo trascorso di una transizione (da 0 a 1) al suo avanzamento (da 0 a 1). cubic-bezier(x1, y1, x2, y2) descrive questa corrispondenza con una curva di Bézier cubica che parte da (0, 0), arriva a (1, 1) ed è attirata da due punti di controllo, P1 = (x1, y1) e P2 = (x2, y2).

• I valori x sono tempi e devono restare tra 0 e 1, altrimenti la funzione non sarebbe una curva di temporizzazione valida. L’editor li mantiene nell’intervallo.
• I valori y sono l’avanzamento e possono scendere sotto 0 o superare 1. Una y sopra 1 fa oltrepassare all’animazione il suo obiettivo per poi tornare indietro, come le curve Back; sotto 0 si muove prima all’indietro.
• Una pendenza ripida significa movimento veloce, una pendenza piatta movimento lento. ease-out parte veloce e finisce lento, il che risulta naturale per gli elementi che entrano sullo schermo. ease-in fa il contrario ed è adatto agli elementi che escono.

Le parole chiave CSS sono scorciatoie: ease = cubic-bezier(0.25, 0.1, 0.25, 1), ease-in = (0.42, 0, 1, 1), ease-out = (0, 0, 0.58, 1), ease-in-out = (0.42, 0, 0.58, 1) e linear = (0, 0, 1, 1).

L’approssimazione linear()

La più recente funzione linear() elenca valori di avanzamento a intervalli di tempo regolari, per esempio linear(0, 0.25, 0.5, 0.75, 1), e li unisce con segmenti retti. Lo strumento campiona la tua curva (risolve la Bézier per ogni istante) e scrive quei valori con tre decimali. Con 20–40 segmenti il risultato è visivamente identico alla curva. Il vero vantaggio di linear() riguarda le curve che una Bézier non può disegnare, come rimbalzi e molle, ma ti permette anche di usare un’unica sintassi. Funziona in Chrome ed Edge 113+, Firefox 112+ e Safari 17.2+, quindi tieni il valore cubic-bezier() come ripiego.