Editor di Easing Cubic-Bézier
Progetta curve di easing cubic-bezier personalizzate con un editor trascinabile e anteprima dell'animazione dal vivo.
Trascina le due maniglie per modellare la curva di easing.
transition-timing-function: —;
animation-timing-function: —;
Tutto viene eseguito nel tuo browser — niente viene caricato.
Informazioni su Editor di Easing Cubic-Bézier
L'Editor di Easing Cubic-Bézier progetta funzioni di temporizzazione personalizzate per transizioni e animazioni CSS. Trascina le due maniglie di controllo sul canvas della curva e il valore cubic-bezier(x1, y1, x2, y2) si aggiorna in tempo reale; un'anteprima dell'animazione riproduce l'easing accanto a un riferimento lineare così puoi percepire la differenza, con una durata regolabile e riproduzione istantanea.
Dieci preset coprono il vocabolario comune: lo standard ease, ease-in, ease-out e ease-in-out, più curve espressive come back e anticipate che superano i loro punti finali, e rampe in stile material accelerate e decelerate. Usali così come sono o come punto di partenza da trascinare in qualcosa di tuo.
Puoi anche digitare le coordinate esatte dei punti di controllo, premere randomize per ispirazione, e copiare sia il valore cubic-bezier() puro sia una regola CSS pronta da incollare. L'intero editor funziona nel tuo browser.
Come usare Editor di Easing Cubic-Bézier
- Trascina le due maniglie sull'editor della curva per plasmare l'easing.
- Clicca su Riproduci e confronta l'animazione con easing rispetto al riferimento lineare, regolando la durata se necessario.
- Prova i preset, ease, back, anticipate, material e altri, per un rapido punto di partenza.
- Perfeziona con gli input numerici dei punti di controllo per valori esatti.
- Copia il valore cubic-bezier() o lo snippet CSS completo.