Editor di Curve Cubic-Bezier — Animazioni CSS
Progetta visivamente le curve di accelerazione CSS cubic-bezier. Trascina i punti di controllo, guarda un'anteprima animata dal vivo, scegli preset e copia la funzione di timing.
Editor di Curve Cubic-Bezier — Crea Curve di Animazione CSS Fluide
Progetta la curva di accelerazione perfetta per le tue animazioni e transizioni CSS. Trascina i due punti di controllo per dare forma alla curva, guarda una pallina riprodurre il movimento in tempo reale, prova i preset classici, e copia la funzione di timing cubic-bezier() direttamente nel tuo foglio di stile.
Cos’è una curva di accelerazione?
L’accelerazione (easing) controlla come un’animazione accelera e rallenta durante la sua durata. Invece di muoversi a velocità costante (lineare), il movimento del mondo reale accelera e decelera. CSS lo esprime con cubic-bezier(x1, y1, x2, y2) — quattro numeri che definiscono una curva dall’inizio (0,0) alla fine (1,1) usando due punti di controllo.
Come usarlo
- Trascina le maniglie rosa: ciascuna piega la curva vicino all’inizio o alla fine
- Guarda la pallina: l’anteprima dal vivo riproduce la tua accelerazione in loop per sentire il movimento
- Superamento: trascina una maniglia sopra o sotto il riquadro per creare effetti di rimbalzo/anticipazione (valori fuori 0–1)
- Preset: parti da ease, linear, ease-in/out, o un rimbalzo elastico
- Copia: ottieni il valore
cubic-bezier()pronto
Capire i quattro numeri
- x1, y1: il primo punto di controllo — dà forma all’inizio dell’animazione
- x2, y2: il secondo punto di controllo — dà forma alla fine
- I valori X sono bloccati tra 0 e 1 (il tempo non torna indietro); i valori Y possono superare quell’intervallo per il superamento
Dove usare il risultato
Incolla il valore in qualsiasi transizione o animazione CSS, ad esempio: transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);. Funziona anche con animation-timing-function.
Privacy
Questo strumento funziona interamente nel tuo browser. Niente viene caricato o memorizzato.