How to bring your webpage to life with CSS transforms, transitions, and animations
CSS 2-D and 3-D transforms enable you to manipulate elements of your website in much more interesting and flexible ways than has been possible using CSS markup before. The specification provides support for rotation, translation, scaling and skewing (as well as arbitrary transforms and compositions of multiple transforms). Combined with the ability to manipulate elements in 3-D space, alter the center of projection and affect the origin of transformations, CSS transforms are very powerful, though they can be somewhat daunting at first sight for the uninitiated.
Note This section contains both static illustrations and links to working examples of the technologies discussed. For best results, view these examples using a browser that supports CSS transforms, transitions, and animations, such as Internet Explorer 10. In addition, these features are hardware accelerated in Internet Explorer 10, so they make use of your computer’s graphics hardware to keep effects smooth and fast.
In this section
CSS Transforms enable you to transform elements in two- and three-dimensional space.
CSS Transitions enable you to create simple animations by smoothly changing CSS property values over a specified duration of time.
CSS Animations enable you to do more than just smoothly change CSS properties over time (CSS transitions already do this). They also offer you the ability to design complex animations using keyframes, as well as more fine-grained control via scripting.