Generatore di easing cubic-bezier

Cos'è un generatore di easing cubic-bezier?

Una *funzione di easing* in CSS controlla come un'animazione accelera e rallenta durante la sua durata. Le parole chiave ease, ease-in, ease-out e ease-in-out sono scorciatoie per quattro curve precise. Per tutto ciò che va oltre, CSS ti offre cubic-bezier(): una funzione che riceve quattro numeri e disegna una curva personalizzata.

Quei quattro numeri sono le coordinate di due punti di controllo (x1, y1, x2, y2). Scriverli a mano è scomodo, perché piccole modifiche hanno grandi effetti visivi e un leggero superamento produce un movimento *con rimbalzo* che dai soli numeri non si vede. Un editor visuale ti permette di trascinare le maniglie e vedere la curva reagire: molto più rapido che ritoccare decimali.

L'editor di Coddy disegna la curva in tempo reale, anima una pallina di anteprima con il tuo easing e offre preset per gli schemi più comuni: le parole chiave CSS, la curva standard di Material Design, un'uscita con rimbalzo e un anticipo con superamento. Copia la stringa cubic-bezier() risultante e incollala nel tuo CSS. Tutto gira nel browser.

Cosa sapere sull'easing cubic-bezier

• La curva rappresenta il *progresso* in funzione del *tempo*. Il tempo va da sinistra a destra (0 → 1), il progresso dal basso verso l'alto (0 → 1). Una diagonale dritta è linear: progresso uguale per ogni unità di tempo.
• Le coordinate X di entrambi i punti di controllo sono limitate a 0..1. Le coordinate Y possono scendere sotto 0 o superare 1: è così che ottieni easing con rimbalzo, anticipo e superamento (l'animazione oltrepassa per un attimo la destinazione o parte nella direzione sbagliata).
• Le curve *ease-out* (gran parte del progresso avviene all'inizio) risultano reattive e scattanti: ottime per le entrate e le reazioni dei pulsanti. Le curve *ease-in* (il progresso avviene alla fine) sembrano lente: di solito sbagliate per la UI, utili per le uscite.
• L'easing *standard* consigliato da Material Design è cubic-bezier(0.4, 0, 0.2, 1): partenza rapida, finale lento. iOS usa qualcosa di simile a cubic-bezier(0.42, 0, 0.58, 1) (ease-in-out).
• Per animazioni brevi (≤200ms) quasi tutti gli easing sembrano simili: conta più la durata che la curva. Per animazioni più lunghe (300ms+) è l'easing a rendere il movimento curato o approssimativo.

Come progettare un easing cubic-bezier

1. 1

   Parti da un preset

   Clicca un preset vicino alla sensazione che cerchi. *Material standard* e *Bouncy out* sono buoni punti di partenza per il movimento nella UI; *ease-out* è la scelta sicura per le animazioni di entrata.

2. 2

   Trascina le due maniglie

   Le maniglie color verde acqua sono i due punti di controllo. Trascina la prima per regolare come *inizia* l'animazione e la seconda per regolare come *finisce*. Portare una maniglia oltre il bordo superiore produce un superamento.

3. 3

   Scegli una durata e riproduci

   Scegli una durata realistica per la tua animazione. Le transizioni della UI durano di solito 150-300ms, i movimenti di enfasi 400-600ms. Clicca *Riproduci* per rilanciare l'anteprima con la nuova durata.

4. 4

   Rifinisci con i campi numerici

   Per valori precisi, scrivi nei campi X1/Y1/X2/Y2 sotto la curva. Y può scendere sotto 0 o superare 1, X resta sempre tra 0..1.

5. 5

   Copia il CSS

   Clicca *Copia* per ottenere la regola transition completa. Incollala nel tuo foglio di stile e sostituisci transform con la proprietà che stai animando.

Riferimento rapido cubic-bezier

Easing comuni e i valori cubic-bezier che li definiscono. Tutte e quattro le parole chiave qui sotto sono alias di curve cubic-bezier precise.

Esempi cubic-bezier da provare

.btn {    transition: transform 180ms cubic-bezier(0.4, 0, 0.2, 1);}.btn:hover {    transform: translateY(-2px);}

.card {    transition: transform 350ms cubic-bezier(0.18, 0.89, 0.32, 1.28);}

.hero {    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.27, 1.55);}

Errori comuni con l'easing

• Usare ease-in per le animazioni di entrata. Parte lento e finisce veloce, l'opposto di ciò che risulta reattivo. Usa invece ease-out.
• Scegliere linear per il movimento della UI perché sembra neutro. Un movimento a velocità costante sembra meccanico: va bene per barre di avanzamento e spinner, raramente per il resto.
• Esagerare con il superamento in ogni transizione. Gli easing con rimbalzo sono un accento, non un'impostazione predefinita: usati ovunque sembrano caos.
• Cercare di correggere un movimento lento cambiando l'easing invece della durata. Se un ease-out di 600ms sembra pigro, prova prima 300ms.
• Dimenticare che le coordinate X di entrambe le maniglie sono limitate a 0..1. Trascinare una maniglia fuori dal lato sinistro o destro dell'area non fa nulla: solo Y può uscire dal riquadro.

Domande frequenti su cubic-bezier