The folks at webkit.org are adopting animation support that has been present in mobile Safari since iPhone 2.0. They are also proposing specs for CSS-based transforms, transitions, and animations:

• http://www.w3.org/TR/css3-2d-transforms/
• http://www.w3.org/TR/css3-3d-transforms/
• http://www.w3.org/TR/css3-transitions/
• http://www.w3.org/TR/css3-animations/

See some animations in action using the latest nightly WebKit at:

• http://webkit.org/blog/324/css-animation-2/

Firefox 3.1 is also adopting WebKit’s proposal for supporting transforms too:

• https://developer.mozilla.org/web-tech/2008/09/12/css-transforms/

And of course there is also the cryptic filters that IE supports for transforms:

• http://msdn.microsoft.com/en-us/library/ms533014(VS.85).aspx

It will be nice to have all of these varying implementations conform to a standard.

Since the way web browsers deal with width and height is so non-intuitive, I’ve created this a handy guide showing how the CSS (Cascading Style Sheets) box model applies widths and heights when scrolling, margins, borders, and padding are involved: