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 :
ease | starts slowly, and then goes fast and ends slowly |
linear | goes at the same speed from start to end |
ease-in | start slowly |
ease-out | ends slowly |
ease-in-out | starts slowly and ends with a slight speed difference from the ease value |
cubic-bezier | The 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 http://en.wikipedia.org/wiki/B%C3%A9zier_curve#Cubic_B.C3.A9zier_curves).
snippet
transition-timing-function:linear;
transition-timing-function: cubic-bezier(0,0,1,1);
Other examples:-
snippet
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
