Today found the excellent of CSS3 animation that it support easing on the animate duration.
The provided default easing cover many common conditions we are using
(Use firefox or Chrome to view the effect):
default »
linear »
ease-in »
ease-out »
ease-in-out »
cubic-bezier »
To add easing on CSS3 animation, just put below code in the start style
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
In addition, you can also make a custom easing like in jQuery by control the value in cubic bezier(), below is an example set as cubic-bezier(.1,1.36,.83,-0.41) :
custom »
Is it interesting? If you are interest on it, you can find help on making custom easing at http://cubic-bezier.com.