Explain Cubic-Bezier

Question

Can somebody explain the css animation timing function cubic bezier?

Answer 1

Cubic-Bezier is a line drawing algorithm used to specify the way line will be drawn. It uses four coordinates as seen in syntax-

cubic-bezier: (n,n,n,n);

value of n lies between 0 and 1.

Eg.

#div1 {transition-timing-function: cubic-bezier(0,0,1,1);}
#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

Above are the styles of 5 div elements with different cubic-bezier values,
the first one is - linear,
second one is- ease,
third one is- ease-in,
fourth one is- ease-out,
and fifth one is- ease-in-out.

Have a look at SoloLearn CSS animations chapter for more. ☺