David Emery Online

Animate & Transform

30 October 2007

Short but very sweet today.

Whatever they’re smoking over on the WebKit team at Apple they need to put in a shiny box, slap a lowercase ‘i’ in front of it and ship it direct into Apple stores.

Check out CSS Transforms and CSS Animation.

They seriously rock!

Briefly, CSS Transforms allow a web developer to scale, rotate and generally transform any piece of content on a web page, including text and images, and also presumably Flash plugins, QuickTime etc. CSS Animation (shockingly enough!) lets you animate any change in any property in CSS, so for example if you change a border on rollover you can have that change fade in, or if you’re using one of the transforms you can couple them with animation as well.

Of course, due to the wonders good implementation all of these new CSS properties will gracefully degrade on all other browsers – so the animation properties will get simply ignored and the change will happen instantly, for example. The only negative point I can see is that it’s a shame these didn’t make Safari 3 that ships with Leopard (and presumably will get released for Windows and 10.4 as well) but it’s a pretty minor quibble.

These new additions will be brilliant for replacing most of things I’ve ever wanted to use Flash for, which is normally simple bits of animation with some rotations and scaling. Obviously Flash can do a huge amount more – its capacity as a video and audio player is second to none – but this checks enough (for me at least) to never need to use it for laying out content and being the main container of the site.

We can only hope that other browser vendors (well, Firefox and Opera at least) will adopt these new properties so we can start really using them. In fact, it’s things like this that should be in CSS 3: practical, well thought out properties that open a whole new world of opportunities for web developers using CSS.