CSS3 Animations Feature

CSS3 animations allow you to add keyframe-based animations to HTML content. You can combine CSS3 animations with CSS3 transforms or transitions to create animations or popular effects such as link nudging.

CSS3 Animations

the expressive web

Minimum Browser Support:

CSS3 Animations

Internet Explorer
NA
Firefox
5.0
Safari
4.0
Chrome
2.0
Opera
NA
Opera Mobile
NA
iOS
3.2
Android
2.1

24.16%

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

Examples

Our Solar System
Uses CSS3 Animations to animate the planets around the sun.
Vitality City
Leverages CSS3 Animations to create responsive navigation elements.

Reference and Documentation

W3C : CSS Animations Module Level 3 Draft

Tutorials and Resources

Feature Detection

Modernizr.cssanimations

if(Modernizr.cssanimations){
   //browser supports CSS Animations
}

Learn more about detecting feature support with Modernizr.

Fallback Strategies

If CSS3 animations are not supported, you can fall back to JavaScript time-based animation of individual DOM properties, or use a plugin solution such as Adobe Flash. Keep in mind that JavaScript-based animations may have a different performance profile than CSS3 animations, especially on devices. It is important that content be adequately tested and profiled on all target devices in order to ensure a good user experience.