Generatore di cubic-bezier CSS

Cos'è Generatore di cubic-bezier CSS?

Il generatore di cubic-bezier CSS è un editor visivo gratuito della funzione di temporizzazione cubic-bezier() usata dalle transizioni e animazioni CSS, pensato per sviluppatori front-end e motion designer. Scegli un preset come ease, linear, ease-in, ease-out o ease-in-out, oppure regola tu stesso i due punti di controllo: i valori x sono limitati all'intervallo legale 0–1, mentre i valori y possono superare 1 o scendere sotto 0 per creare overshoot e anticipazione. L'anteprima traccia la curva su un quadrato unitario così leggi a colpo d'occhio accelerazione e decelerazione, e la dichiarazione esatta cubic-bezier(x1, y1, x2, y2) viene prodotta per essere copiata. Usalo ogni volta che una parola chiave integrata sembra troppo generica e vuoi un movimento più scattante, più elastico o più misurato.

Come usare Generatore di cubic-bezier CSS

1. Apri le Impostazioni e scegli un preset di partenza — ease, linear, ease-in, ease-out o ease-in-out — per impostare i punti di controllo.
2. Trascina le due maniglie rotonde sull'anteprima della curva per rimodellare l'easing, oppure digita valori esatti nei campi x1, y1, x2 e y2.
3. Tieni x1 e x2 tra 0 e 1; spingi y1 o y2 sopra 1 o sotto 0 per aggiungere overshoot o anticipazione al movimento.
4. Confronta la curva con la linea di base lineare tratteggiata per valutare come l'easing accelera e decelera.
5. Copia il valore cubic-bezier() generato e incollalo nella tua transition-timing-function o animation-timing-function.

Esempi

x1 0.25, y1 0.1, x2 0.25, y2 1

cubic-bezier(0.25, 0.1, 0.25, 1)

x1 0, y1 0, x2 0.58, y2 1

cubic-bezier(0, 0, 0.58, 1)

x1 0.34, y1 1.56, x2 0.64, y2 1

cubic-bezier(0.34, 1.56, 0.64, 1)

Domande frequenti

Cosa significano i quattro numeri di cubic-bezier?

Sono le coordinate dei due punti di controllo: x1, y1 per il primo punto e x2, y2 per il secondo. La curva parte sempre da (0,0) e finisce a (1,1); i punti di controllo la piegano nel mezzo, il che determina come la proprietà animata accelera e rallenta nel tempo.

Perché non posso impostare x1 o x2 sopra 1?

La specifica CSS richiede che le coordinate x (tempo) di entrambi i punti di controllo restino tra 0 e 1, così la funzione di temporizzazione rimane una mappatura valida dal progresso all'output. Questo strumento limita automaticamente i campi x e le maniglie di trascinamento a quell'intervallo. I valori y, invece, possono superare 1 o scendere sotto 0 per creare overshoot o anticipazione.

Come creo un easing rimbalzante o elastico?

Spingi uno dei valori y sopra 1 (per overshoot alla fine) o sotto 0 (per anticipazione all'inizio). Per esempio cubic-bezier(0.34, 1.56, 0.64, 1) supera il punto prima di assestarsi, dando una sensazione a molla senza alcun JavaScript.

Dove uso il valore generato?

Incollalo come valore di transition-timing-function o animation-timing-function — per esempio transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Sostituisce parole chiave come ease o ease-in-out con la tua curva personalizzata.

I miei dati vengono inviati a un server?

No. L'intero editor gira nel tuo browser con JavaScript — i punti di controllo e la curva sono calcolati localmente e mai caricati, quindi funziona in modo privato e persino offline una volta caricata la pagina.