Bringing pages alive with CSS Transforms & Animations

Introduction

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 to animations using Javascript.

These features are exposed through a slew of CSS properties and Javascript events. We hope this guide serves as a gentle introduction to these new concepts and allows you to more seamlessly integrate 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.