Curva cubic-bezier
Crea una curva di animazione CSS trascinando le maniglie, con anteprima animata.
- Istantaneo
- Gratis
- Privato (elaborato localmente)
- Senza registrazione
Disegna la tua curva di animazione
Trascina le due maniglie sul grafico per modellare l’easing, guarda la pallina animata riprodurre il movimento e copia il valore cubic-bezier() per il tuo CSS.
-
Parti da un preset
ease, ease-in-out, linear…
-
Regola le maniglie
X = tempo (0–1), Y libero per il rimbalzo.
-
Copia il CSS
Incolla in transition o animation.
I preset CSS
| Nome | cubic-bezier |
|---|---|
| linear | (0, 0, 1, 1) |
| ease | (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) |
X limitato a [0,1], Y può sforare per i rimbalzi. Anteprima via Web Animations API, tutto resta locale.
Domande frequenti
Cos’è una curva cubic-bezier?
È la funzione di timing che descrive come un’animazione accelera e rallenta. È definita da due punti di controllo (x1, y1, x2, y2). In CSS: transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1).
Perché i valori Y possono superare 1?
Le X restano tra 0 e 1 (il tempo), ma le Y possono uscire da [0,1] per creare un effetto di rimbalzo o sorpasso (l’elemento va oltre e torna). Così si ottengono le curve «back» ed elastiche.
Come si usa nel mio CSS?
Incolla il valore in transition: all 0.3s cubic-bezier(…) o in animation-timing-function. L’anteprima animata mostra il risultato reale prima di incollare.
Quali sono i preset standard?
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), linear = (0, 0, 1, 1). Parti da un preset e regola le maniglie.