Thursday, January 15th, 2009

CSS Transitions Shim; Getting transition support into other browsers

Category: CSS

Weston Ruter has developed a very nice shim that allows you to get CSS Transitions support in browsers that do not have the WebKit renderer.

He has an innovative approach that uses XBL and HTC bindings to detect when a style rule changes and thus when the selected elements need to be animated/transitioned into the newly matched transition style rule:

Declarative animations in CSS are an attractive solution, and I wanted to use the technology today.
I therefore developed a prototype script which implements a subset of CSS Transitions via jQuery Animation (inspired by Chris Schneider’s CSS Effects powered by mootools).

This implementation requires a binding language such as Mozilla’s XBL or MSIE’s DHTML Behaviors. Because of this, the script works in Firefox 2, Firefox 3, and MSIE 7 (IE 6 is not supported, but it does have limited functionality); in WebKit-based browsers the script does nothing since CSS Transitions are supported natively. Opera is not supported because it has no binding language.

Why is a binding language required? The script parses the stylesheet rules looking for transition-* properties, and when it finds one, it adds a binding to that style rule so that when the rule gets applied, the binding’s code is executed on each of the newly selected elements.

This enables transitions to get triggered when a class name is changed. The binding code knows the transition style properties which were defined in its containing style rule, so when it gets executed it transitions the elements’ styles from the previously matched style rule to the styles defined in the newly matched style rule. Each of these style rules I’m calling transition states.

He then goes on to talk about the subtle issues. Very nice work indeed Weston!

Posted by Dion Almaer at 5:09 am

4.1 rating from 19 votes


Comments feed TrackBack URI

Each time I think we’ve probably seen the last of these clever shims, someone builds a new one. Kudos. CSS transitions seem set to become another one of those “native on all browsers except IE, where it is shimmed” features.

Comment by Joeri — January 15, 2009

There’s also FakeSmile that provides support for SMIL (declarative animations).

Comment by codedread — January 15, 2009

Really VERY cool. I’ll look into this closely, the animation support in CSS gets me very excited (for separation of concerns reasons, and just for cleaning up the JS code). Anybody aware of/planning an YUI port?

Comment by zzen — January 15, 2009

Leave a comment

You must be logged in to post a comment.