6 Comments

Summary:

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 […]

photo-8

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.

You’re subscribed! If you like, you can update your settings

  1. I explored this question a year ago in:

    Runtime wars (2): Apple’s answer to Flash, Silverlight and JavaFX

    http://counternotions.com/2007/11/15/apple-runtime-answer-2/

    and:

    Daily question: Can your browser do this?

    http://counternotions.com/2008/11/14/canvas/

  2. It occurs that if Apple really wants to push this that they should build a version of iWeb that allows for the easy creation of sites using these kinds of animations. With a bit more of this kind of pizazz and a soupçon more control over the details, iWeb could actually become an interesting and popular product.

  3. David Benjamin Jones Saturday, February 7, 2009

    I’m extremely excited about this because I abhor using script.aculo.us. It may be nice, but if I can get the same stuff from CSS, I will gladly go for it. Unfortunately, it may take the other browsers some time (like a year or two) to adopt these. Then there’s the W3C. Will they make it a standard? Hopefully.

  4. not sure if you’re using safari 3, but safari 4 developer preview (5528.1) supports the animations already.

  5. David Benjamin Jones Sunday, February 8, 2009

    No, I’m not. That is, however, very good news from any viewpoint. Thanks.

  6. Anthony Calzadilla Friday, December 11, 2009

    Flash is dead as far as interface goes… I would see css3 more as a threat to jquery animation

Comments have been disabled for this post