Bringing pages alive with CSS Transforms & Animations
CSS Transforms are a powerful feature that allows you to manipulate elements of your Web Content in much more interesting and flexible ways than traditionally possible through CSS markup.
The specification provides support for rotations, translations, scaling and skewing (as well as arbitrary transforms and compositions of multiple transforms). Combined with
the ability to manipulate elements in 3D space, alter the center of projection and affect the origin of transformations, CSS Transforms can be somewhat daunting at first sight for the uninitiated.
CSS Animations mesh with CSS Transforms to really bring web content to life. They present a more flexible alternative to CSS Transitions (with more fine-grained control over
the composition of an element's change over time). Additionally, since they run asynchronously to scripting in modern browsers, they offer a much more performant alternative
them into your Web Content. In the following pages, we will overview CSS Transforms (both in 2D and 3D) and CSS Animations, along with their key components. Additionally, we will demonstrate
how these two technologies can be combined in order to achieve an effect that was previously unrealistic, full page animations
We encourage you to explore this tutorial using a browser that supports CSS Animations and Transforms such as Internet Explorer 10
(which does with full 3D acceleration and will provide the smoothest possible experience).
You will notice that by utilizing these features, navigation through the pages of this guide truly feels alive, fast and fluid.
Throughout this tutorial, we will be using unprefixed markup. Internet Explorer 10
supports unprefixed CSS Animations and Transforms, however other browsers
may not. Please make sure to you use the proper vendor prefix when incorporating CSS Transforms and Animations in your context and future-proof your work by including the unprefixed markup as well.
Your browser does not support CSS Transforms and/or CSS Animations.