CSS Spec Proposals for Transforms, Transitions, and Animation

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://webkit.org/specs/CSSVisualEffects/CSSTransforms.html
• http://webkit.org/specs/CSSVisualEffects/CSSTransitions.html
• http://webkit.org/specs/CSSVisualEffects/CSSAnimation.html

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.

Visualizing the CSS Box Model

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: