How to bring your webpage to life with CSS transforms, transitions, and animations

  • Article

Internet Explorer 10 (and Windows Store apps using JavaScript) adds to the support for Cascading Style Sheets (CSS) 2-D transforms introduced in Internet Explorer 9 by supporting CSS 3-D transforms, CSS transitions, and CSS animations.

Introduction

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.

CSS transitions and animations can be used with CSS transforms to bring your web content to life. Additionally, because they run asynchronously to scripting in Internet Explorer 10, they offer a much speedier alternative to animations using JavaScript. CSS transitions are a relatively straightforward way to animate elements from one state to another. CSS animations are more flexible than CSS transitions, featuring more fine-grained control over how an element changes over time and the ability to define intermediate states.

These features are exposed through several new CSS properties and JavaScript events, all of which are defined by their corresponding World Wide Web Consortium (W3C) specification. The information here serves as an introduction to these new concepts and enables you to seamlessly integrate them into your website. We'll provide an overview of CSS transforms (both 2-D and 3-D), CSS transitions, and CSS animations, along with their key components. You'll see many examples of these technologies in use.

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

Topic Description

CSS Transforms in 2-D and 3-D

CSS Transforms enable you to transform elements in two- and three-dimensional space.

CSS Transitions

CSS Transitions enable you to create simple animations by smoothly changing CSS property values over a specified duration of time.

CSS Animations

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.