CSS Animation in Latest WebKit Builds, Threat to Flash On iPhone?

According to the official WebKit blog, the browser rendering engine now supports some explicit CSS animations. A recent nightly build brings support for keyframes and repeating animated effects coded directly in CSS. The animation features are currently exclusive to test builds of Safari, but they have already been put into play by Apple in the iPhone and iPod touch’s mobile Safari browser.

Since that’s the easiest way to see them live, I fired up mobile Safari on my iPhone and had a look at the three demos available. There are falling leaves, pulse, and a bouncing box. The falling leaves were probably the most impressive example of the potential this new tech offers, but all three were promising and looked good on the iPhone. They should soon be supported by Safari for the desktop as well, and they have been submitted for inclusion in the official CSS standards, as determined by the W3…

While it’s not clear yet what the limitations of the tech are in terms of interactivity, they do present a nice, simple alternative to overly complicated Flash animations, at least for visuals. Depending on how advanced the support for CSS animations and other effects becomes, Apple may see less of a need for supporting Flash. As the iPhone gains more hold in the mobile browser market, web designers could opt to code in CSS animation effects to reach a broader audience.

Regardless of what happens with Flash, CSS animation support is promising for iPhone users and developers alike, since it expands the canvas and promises more graphically-rich content. As long as it doesn’t result in this kind of thing.