The transition-timing-function property defines how the speed will be calculated during the transition and allows for a transition to change speed over its duration.

The possible values are :

easestarts slowly, and then goes fast and ends slowly
lineargoes at the same speed from start to end
ease-instart slowly
ease-outends slowly
ease-in-outstarts slowly and ends with a slight speed difference from the ease value
cubic-bezierThe cubicbezier timing function requires four numeric values to calculate the speed of your transition. In fact, all timing function values are defined by using a specific cubic-bezier curve, which is itself defined by four control points—for instance, the ease function is equivalent to cubic-bezier(0.25, 0.1, 0.25, 1.0).

Read more about them at
transition-timing-function: cubic-bezier(0,0,1,1);

Other examples:-
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
Related Tutorial
Follow Us #