CSS3 Transitions Feature

CSS3 transitions provide a simple method for gradually changing the CSS properties of an HTML element between two states, allowing you to create simple animated rollover, fade, or other transition effects without using JavaScript. When using this feature, you declare the property to be transitioned as well as the duration, speed, and type of transition you want.

CSS3 Transitions

the expressive web

Minimum Browser Support:

CSS3 Transitions

Internet Explorer
10.0
Firefox
4.0
Safari
3.2
Chrome
1.0
Opera
10.6
Opera Mobile
10.0
iOS
3.2
Android
2.1

38.08%

Percentage of users who can view this feature (source: caniuse.com)

Examples

Nike Better World
Uses CSS Transitions to provide smooth animations between page sections.
20 Things I learned about Browsers and the Web
Makes extensive use of CSS Transitions to provide seamless transitions between different states.

Reference and Documentation

W3C Draft: CSS Transitions Module Level 3

Tutorials and Resources

Feature Detection

Modernizr.csstransitions

if(Modernizr.csstransitions) {
   //CSS Transforms are supported
}

Learn more about detecting feature support with Modernizr.

Fallback Strategies

In general, CSS3 transitions gracefully degrade when running in a browse that does not support the transitions. Instead of animating property changes (such as position), the changes will just take effect without the animation.

The main fallback solution when running content in a browser that does not support CSS3 transitions is to animate the content using JavaScript.

CSS3 Animation With jQuery Fallbacks