Generatore CSS Cubic Bezier
Trascini le due maniglie per modellare una curva di easing, osservi il movimento in tempo reale e copi il valore cubic-bezier() risultante.
cubic-bezier(0.25, 0.1, 0.25, 1)La curva viene disegnata direttamente nel Suo browser. Nessun dato impostato viene caricato su BroBroGo.
FAQ
Cosa significano le due maniglie e i quattro numeri?
La curva si sviluppa dall'angolo in basso a sinistra (inizio) a quello in alto a destra (fine), con il tempo che scorre da sinistra a destra e il progresso verso l'alto. Le due maniglie sono i punti di controllo che ne determinano la curvatura: ciascuna ha coordinate X e Y, definendo la formula cubic-bezier(x1, y1, x2, y2). La coordinata X rimane compresa tra 0 e 1, mentre la Y può superare i limiti superiore o inferiore per creare l'effetto di rimbalzo o di arretramento prima di stabilizzarsi.
Come si usa il valore ottenuto nel codice CSS?
Copi la funzione cubic-bezier() e la inserisca dove richiesto dalla proprietà di timing, come transition-timing-function, animation-timing-function o la proprietà abbreviata (es. transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1)). Le parole chiave ease, ease-in, ease-out ed ease-in-out sono semplicemente curve cubic-bezier predefinite: selezionando uno di questi preset vedrà il valore esatto associato.
È possibile creare un effetto di rimbalzo o elastico?
Non da sola. Una singola curva cubic-bezier può anticipare o superare il limite (i preset "back" spingono una maniglia oltre il box proprio per questo), ma può solo muoversi in una direzione e poi stabilizzarsi. Gli effetti di rimbalzo (bounce) o elastici richiedono inversioni di direzione multiple che una singola curva non può esprimere; per quelli sono necessari i keyframe CSS o la funzione linear() con più punti di arresto.