transition-timing-function

Back to the index.

A very useful tool for calculating cubic bezier functions is cubic-bezier.com. I used it for my examples.

Pre-defined cubic-bezier functions

All together now.

linear

ease

ease-in-out

ease-in

ease-out

Custom cubic-bezier functions

The test element should grow smaller before it grows larger.

cubic-bezier(.68,-0.68,.49,.98)

Step-functions

All together now.

step-start

step-end

step(4,start)

step(4,end)