Editor di bezier cubico

Funzionalità di Editor di bezier cubico

• 01

  Trascina la curva, vedi il movimento

  Due maniglie trascinabili controllano l'inizio e la fine della bezier. L'animazione della palla di accompagnamento riproduce la curva per la durata che scegli, così puoi visualizzare l'effetto overshoot e ease-out senza lasciare la pagina.

• 02

  Tutti i preset standard

  Inizia con l'ease, linear, ease-in, ease-out e ease-in-out integrati di CSS — quindi regola. L'interruttore preset torna automaticamente a "personalizzato" quando sposti una maniglia.

• 03

  Copia CSS con un clic

  Il valore cubic-bezier() si aggiorna dal vivo con precisione a due decimali, pronto per essere inserito in transition-timing-function o animation-timing-function.

Domande frequenti su Editor di bezier cubico

Perché i valori Y possono andare sopra 1 o sotto 0?

I punti di controllo di Bezier al di fuori dell'intervallo 0–1 producono effetti di overshoot e undershoot — la curva va oltre il suo punto finale prima di stabilizzarsi. Così vengono create le curve di easing "bouncy"; l'asse X deve comunque stare in 0–1.

Come uso l'output?

Copia la stringa cubic-bezier(...) e incollala in qualsiasi valore CSS transition-timing-function o animation-timing-function. Funziona in tutti i browser moderni.

L'anteprima è precisa per quello che CSS farà?

Sì — l'anteprima anima una palla dal 0 al 100% usando la stessa formula cubic bezier che i browser usano per le transizioni. Il cursore di durata ti consente di sentire le curve lente vs quelle veloci prima di impegnarti.

Cosa significa veramente ease-in-out?

Ease-in-out inizia lentamente, accelera nel mezzo e rallenta di nuovo alla fine — la curva cubic-bezier(0.42, 0, 0.58, 1). È il valore predefinito per la maggior parte del movimento dell'interfaccia utente levigato perché riflette come gli oggetti fisici reali accelerano e decelerano.