Generatore di cubic-bezier CSS

Cos'è Generatore di cubic-bezier CSS?

Il generatore di cubic-bezier CSS è un editor visivo gratuito delle funzioni di easing usate dalle transizioni e animazioni CSS, pensato per sviluppatori front-end e motion designer. In modalità cubic-bezier trascini due punti di controllo (o li digiti) per dare forma a una curva: i valori x restano nell'intervallo legale 0–1, mentre i valori y possono superare 1 o scendere sotto 0 per creare overshoot e anticipazione. Una modalità steps() copre la temporizzazione a scatti con un numero di passi regolabile e un termine di salto — jump-start, jump-end, jump-none o jump-both, dove step-start e step-end sono steps(1, …). Un'anteprima animata dal vivo riproduce l'easing corrente su un riquadro che si muove e si ridimensiona per una durata che imposti, puoi sovrapporre qualsiasi preset come curva fantasma per confrontare e importare una stringa cubic-bezier() o steps() esistente. Copia la dichiarazione esatta per la tua transition-timing-function o animation-timing-function.

Come usare Generatore di cubic-bezier CSS

1. Scegli la modalità cubic-bezier() o steps() in alto, oppure apri le Impostazioni per partire da un preset come ease, ease-in-out o linear.
2. In modalità cubic-bezier, trascina le due maniglie sul grafico o digita valori esatti di x1, y1, x2 e y2; spingi y sopra 1 per l'overshoot.
3. In modalità steps(), imposta il numero di passi e scegli un termine di salto (jump-start, jump-end, jump-none o jump-both) per disegnare la scala.
4. Premi Riproduci per far girare l'animazione dal vivo sul riquadro che si muove e si ridimensiona, e regola la durata in secondi per sentire il ritmo.
5. Scegli una curva di confronto nelle Impostazioni per sovrapporre un preset come fantasma sullo stesso grafico, oppure incolla un valore in Importa e applicalo.
6. Copia il valore cubic-bezier() o steps() generato 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.34, y1 1.56, x2 0.64, y2 1

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

modalità steps, N 4, jump-end

steps(4, jump-end)

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.

A cosa serve la modalità steps()?

steps() salta tra un numero fisso di valori invece di interpolare in modo fluido — utile per animazioni di sprite, contatori a scatti o effetti fotogramma per fotogramma. Imposta il numero di passi e un termine di salto: jump-start, jump-end, jump-none o jump-both. step-start equivale a steps(1, jump-start) e step-end a steps(1, jump-end).

Come funziona l'anteprima con animazione dal vivo?

Premi Riproduci e il riquadro si muove lungo la pista e si ridimensiona usando il tuo easing corrente, avanti e indietro. Cambia la durata in secondi per rallentarlo o accelerarlo; usa animazione CSS pura con il tuo valore cubic-bezier() o steps() come funzione di temporizzazione.

Posso importare un valore di easing esistente?

Sì. Incolla un valore cubic-bezier(...) o steps(...) — o una parola chiave come ease-in-out, step-start o step-end — nel campo Importa e applicalo; l'editor lo analizza di nuovo nei punti di controllo o nelle impostazioni dei passi.

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.