CSS Animation Coming to a Browser (and Smartphone) Near You

Last Friday the WebKit team (makers of the engine in Apple’s Safari browser and iPhone), introduced a new CSS animation feature in the nightly browser builds. CSS animation allows Web designers to incorporate keyframe-based animated effects in a stylesheet:

CSS Animations is one of the enhancements to CSS proposed by the WebKit project that we’ve been calling CSS Effects (eg. gradients, masks, transitions). The goal is to provide properties that allow Web developers to create graphically rich content. In many cases animations are presentational, and therefore belong in the styling system. This allows developers to write declarative rules for animations, replacing lots of hard-to-maintain animation code in JavaScript.

There are already many ways to create animation on the Web, including Flash, Silverlight, JavaScript, and animated GIF images, to name a few. Why should we care about CSS-based animation? Unlike Flash and Silverlight, CSS animation does not require any browser plug-ins. JavaScript solutions can be complex or require difficult coding techniques, and GIF animations are slow loading and often blocked by browsers due to their gratuitous overuse in the early days of the Web.

Right now support for desktop browsers is limited, but CSS animation is already built into that iPhone or iPod Touch you probably have in your pocket. It may take time for most desktop browsers to incorporate CSS-based animation, but it bodes well for a faster, richer experience on the Web. I see this as yet another step towards a future of Rich Internet Applications (RIA) that may soon replace your desktop apps.