Come creo una curva di easing cubic-bezier personalizzata per i CSS?

Trascina le due maniglie dei punti di controllo sul grafico, digita i valori esatti x1, y1, x2, y2, o scegli un predefinito. Poi scegli CSS in Formato di output e clicca Copia per ottenere il valore cubic-bezier() per transition-timing-function.

Come faccio a creare un effetto rimbalzo o overshoot con cubic-bezier?

Trascina una maniglia sopra o sotto il riquadro in modo che il suo valore Y superi 0-1. Y può superare quell'intervallo, mentre X rimane tra 0 e 1. I predefiniti back-out e anticipate sono punti di partenza già pronti per l'overshoot.

Posso ottenere l'easing per Tailwind, Framer Motion o anime.js?

Sì. Le schede del formato di output sono CSS, Tailwind, Framer Motion e anime.js. Formattano tutte gli stessi quattro numeri, quindi scegli una scheda e clicca Copia per mettere lo snippet negli appunti.

Come carico un valore cubic-bezier esistente per modificarlo?

Incolla un valore come cubic-bezier(.17, .67, .83, .67) nel riquadro di importazione e clicca Carica. Se non è possibile leggere quattro numeri, ricevi un messaggio di errore. La curva è anche memorizzata nell'URL della pagina dopo l'hash, quindi può essere condivisa.

Perché l'anteprima sembra più lenta delle mie transizioni reali?

L'Anteprima movimento usa un'impostazione di Durata che puoi modificare, e i valori predefiniti sono più lenti in modo da poter studiare la curva. Accorcia la Durata, poi usa Replay per vedere il movimento alla velocità che intendi pubblicare.

Sì. Ogni strumento è gratuito, senza account e senza carta di credito. L'elaborazione avviene sul tuo dispositivo e non sui nostri server, ed è proprio questo che ci permette di offrirlo gratis.

Sì. Funziona nei browser mobili recenti su iOS e Android, senza installare nulla.

📈

Generatore CSS Cubic-Bezier Easing gratis

Progetta curve CSS easing trascinando i punti di controllo, visualizza il movimento live e copia il valore cubic-bezier(). Include preset overshoot/rimbalzo.

Funziona nel tuo browserNessuna registrazione, nessun pop-upNessun accesso richiestoGratis per sempre

Funziona offline una volta caricato

Trascina le maniglie verde acqua e rosa per modellare la curva

Punti di controllo

x1y1x2y2

Anteprima movimento

Durata1,6s

Transizione larghezza

Valore CSS

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);

Preset

Le maniglie rosa e verde acqua possono essere trascinate sopra o sotto il riquadro (Y oltre 0-1) per creare effetti di overshoot/rimbalzo come back-out e anticipate. X rimane entro 0-1 (il tempo non può invertirsi).

Usi comuni

Easing Transizioni CSS PersonalizzatoProgetta easing che si sente naturale per effetti hover, menu e transizioni UI.
Animazioni Rimbalzo e OscillazioneCrea movimento a molla giocoso tirando i punti di controllo oltre la scatola.
Easing per Animazioni @keyframesScegli la giusta animation-timing-function per le animazioni CSS keyframe.
Valori Easing per Librerie JS AnimationOttieni valori cubic-bezier per GSAP, Framer Motion, anime.js e altri.
Comprendi Come Funziona l'EasingVedi la relazione tra una curva bezier e il movimento che produce.

Come funziona

L'editor è costruito interamente nel browser usando lo stato React e SVG — nessuna libreria gestisce la matematica della curva. Due punti di controllo trascinabili definiscono un percorso Bezier cubico SVG, e il motore di animazione CSS del browser stesso esegue l'anteprima del movimento iniettando il valore cubic-bezier() risultante direttamente in una regola @keyframes.

1
Trascina o digita i punti di controllo
Due maniglie (P1 in verde acqua, P2 in rosa) si trovano su un canvas SVG. Il trascinamento usa la Pointer Events API con setPointerCapture così la maniglia segue il tuo dito o cursore anche fuori dal confine SVG. Puoi anche spostare le maniglie con i tasti freccia o digitare valori esatti negli input numerici x1/y1/x2/y2.
2
SVG disegna la curva in tempo reale
La curva è un singolo elemento SVG <path> il cui comando C (Bezier cubico) viene ricalcolato dalle quattro coordinate dei punti di controllo a ogni aggiornamento di stato. Nessun canvas, nessuna libreria esterna — il renderer SVG del browser disegna il percorso direttamente.
3
Il motore CSS del browser mostra l'anteprima dell'easing
Tre animazioni dal vivo (un punto scorrevole, una transizione di larghezza, e una scala) eseguono @keyframes CSS con il valore cubic-bezier() iniettato inline. Il motore di animazione del browser stesso interpreta la curva, così ciò che vedi è esattamente ciò che il tuo CSS di produzione produrrà.
4
Copia lo snippet nella sintassi del tuo framework
Le schede formattano gli stessi quattro numeri come una funzione CSS transition-timing-function, una classe Tailwind di valore arbitrario, un array di easing Framer Motion, o una stringa di easing anime.js. Lo snippet viene scritto negli appunti con navigator.clipboard. La curva viene anche codificata nell'hash URL (#b=x1,y1,x2,y2) così puoi condividerla o salvarla nei preferiti.