Overshoot și undershoot — curbe bouncy. X trebuie 0–1.

Copiați cubic-bezier(...) în CSS transition-timing-function.

Da — previzualizare folosește formula CSS.

Începe lent, accelerează, încetinește — cubic-bezier(0.42, 0, 0.58, 1).

Pentru dezvoltatoriGratuitRulează local

Editor Cubic-bezier

Proiectați curbe CSS cubic-bezier — trageți mânere, vizualizare, copiați CSS.

CSS

cubic-bezier(0.25, 0.1, 0.25, 1)

Previzualizare

Presetare

P1 x

P1 y

P2 x

P2 y

Durata previzualizării (ms)

Trageți mânerele verzi sau utilizați glisoarele pentru a ajusta curba.

Despre Editor Cubic-bezier

Editorul cubic-bezier Handytool craft CSS easing prin tragerea control points. Începeți de la preset, reglare, live ball playback — simțiți timing.

01
Trageți curve, vedeți motion
Doi mânere controlează bezier. Ball animation arată mișcare.
02
Presete standard
ease, linear, ease-in, ease-out, ease-in-out — reglare de aici.
03
Copiați CSS
cubic-bezier() live update, gata de transition.

Y > 1 sau < 0?: Overshoot și undershoot — curbe bouncy. X trebuie 0–1.
Utilizați ieșire?: Copiați cubic-bezier(...) în CSS transition-timing-function.
Precis?: Da — previzualizare folosește formula CSS.
ease-in-out?: Începe lent, accelerează, încetinește — cubic-bezier(0.42, 0, 0.58, 1).