Hack 24. Turn Transforms into Animations with CSS3 Transitions

You can turn 2D and 3D transforms into custom animations with the simple-to-use transition attribute.

Animations have always been fascinating for web developers. The only animation mechanism available to us in the past has been JavaScript, but it has always been so laborious to constantly redraw our elements on the page—like creating those old flipbook animations my parents use to make back before there were televisions. A number of JavaScript libraries, including jQuery and YUI, have simplified the process of animating elements, but in the end it was still JavaScript moving elements. The results have always been disappointing.

Then along came this ray of light called transitions. Transitions aren’t animations per se, but they do allow us to add a property to a CSS declaration that changes another property over a specified duration, and wow, is it smooth!