Cos'è una curva di Bézier cubica?

Una curva definita da 4 valori di controllo — usata dalle transizioni e animazioni CSS per controllare la velocità di cambiamento nel tempo. L'"ease" del browser è cubic-bezier(0.25, 0.1, 0.25, 1).

Quando la curva di easing supera 0 o 1 (valori y di controllo 1), l'animazione 'rimbalza' oltre i suoi punti finali. Utile per UI giocose.

Sono disponibili dei preset?

Sì — preset comuni (linear, ease, ease-in, ease-out, ease-in-out) più alcune curve personalizzate popolari.

L'editor è gratuito?

Sì — completamente gratuito, senza registrazione.

Colore e design

Editor Cubic Bezier

Editor cubic-bezier gratuito. Progetta visivamente curve di easing CSS con maniglie di trascinamento, preset e anteprima animata in tempo reale. Copia il CSS per transizioni e animazioni.

Runs in your browser

Cubic-bezier editor

x10.25

y10.1

x20.25

y21

CSS

transition-timing-function: cubic-bezier(0.25, 0.10, 0.25, 1.00);

Nota dell'editore

Understanding · Time, but with feeling.

Questo capitolo approfondito è attualmente disponibile solo in inglese. Lo strumento di conversione qui sopra funziona nella tua lingua; il lungo articolo esplicativo non è stato ancora tradotto.

Domande frequenti

Quick answers.

›What's a cubic-bezier?

A curve defined by 4 control values — used by CSS transitions and animations to control the rate of change over time. The browser's 'ease' is cubic-bezier(0.25, 0.1, 0.25, 1).

›What's overshoot?

When the easing curve exceeds 0 or 1 (control y-values < 0 or > 1), the animation 'bounces' past its endpoints. Useful for playful UIs.

›Are presets available?

Yes — common presets (linear, ease, ease-in, ease-out, ease-in-out) plus a few popular custom curves.

›Is the editor free?

Yes — fully free, no signup.

Le persone cercano anche

Strumenti correlati

More in this room.

Vedi tutto in Colore e design