Transitions

The function of CSS3 Transitions is very straightforward: smoothly change the computed value of a CSS property from its old value to its new value. Moreover, changes in value resulting from changes in an element’s CSS class or pseudo-class also trigger transitions.
Consider the following markup:

img {

opacity: 1;

transition-property: opacity;

transition-duration: 2s;

transition-delay: 0s;

transition-timing-function: linear;

}

img:hover {

opacity: 0;

}

The effect of this is that when the user moves his or her mouse over the image, the image will fade out smoothly over 2 seconds starting immediately, as illustrated below (I’ve added a dropped shadow on a wrapping element to illustrate the endpoint).

Fading one image to nothing over 2 seconds

The transition properties that cause this to occur are:

• transition-property – specifies which CSS properties are to be transitioned. The keyword “all” causes all animatable properties to transition when changed. The default value is “all.”
• transition-duration – the time, in seconds or milliseconds, of the transition, starting after the transition-delay. The default value is zero, meaning that the transition is immediate.
• transition-delay – the time, in seconds or milliseconds, after the value is changed before the transition starts. The time may be negative, in which case the transition starts part way through its duration. The default value is zero.
• transition-timing-function – describes how the intermediate values of a transition are calculated. This allows a transition to change speed over its duration. The underlying function is a cubic Bézier curve; keywords match common functions. The default value is the keyword “ease,” a function that starts fast and slows down toward the end.

Fading one image to nothing is a simple example. Let’s say we wanted to fade one image to another, as illustrated below.

Fading from one image to another over 2 seconds

The following markup accomplishes this (except that vendor prefixes must precede all the transition properties).
HTML Fragment

<div id="imageWrapper">

<img id="backImage" src="imageB.jpg" /><img id="frontImage" src="imageA.jpg" />

div>

CSS Fragment

#imageWrapper {

display: inline-block;

width: 400px;

height: 267px;

box-shadow: 2px 2px 5px 0px gray;

position: relative;

}

#imageWrapper img {

width: 400px;

height: 267px;

position: absolute;

transition-property: opacity;

transition-duration: 2s;

transition-timing-function: linear;

}

#imageWrapper #frontImage, #imageWrapper:hover #backImage {

opacity: 1;

}

#imageWrapper:hover #frontImage, #imageWrapper #backImage {

opacity: 0;

}

Here’s a working version of the markup above:

Move your mouse over the image to fade it to another.
CSS3 Transitions are supported by your browser with -moz-transition.

Simple transitions, such as the one above, are moderately easy to simulate in JavaScript. The benefits of CSS Transitions are their declarative definitions, making them easier than script, and they run—at least in IE10—asynchronously to the main processing thread resulting in smoother transitions and sites that are more responsive.
An interactive demo of CSS3 Transitions is available on the IE Test Drive site. The demo works in all browsers that support CSS3 Transitions, including IE10 in the Windows Developer Preview.