With CSS3 you can apply transformation to DOM objects.. you can do a lot of thing but basically you can translate, rotate, scale and skew. One interesting thing I discovered today is how to add a custom “easing” to that transformation: cubic-bezier!
What you have to put in your css is:
-webkit-transition: -webkit-transform .5s cubic-bezier(.82,.2,.89,.3); -moz-transition: -moz-transform .5s cubic-bezier(.82,.2,.89,.3); -ms-transition: -ms-transform .5s cubic-bezier(.82,.2,.89,.3); -o-transition: -o-transform .5s cubic-bezier(.82,.2,.89,.3);
Instead of “cubic-bezier(a,b,c,d)” you can also use a few preset (linear, ease, ease-in, ease-out, ease-in-out).
To figure out which values put in that function you can use this useful site: cubic-bezier.com. There you can also compare curves!!!