CSS3 Transition Polyfill

Question

Alright, so most of you will be familiar with CSS3 Transitions, I prefer it above jQuery animations as it has the simplicity of CSS. My only regret is that it doesn't work in IE < 9( As always ) as well as Firefox < 4, Safari < 4, etc. I do not mean writing separate animations in JavaScript just for IE. But I want a solution that will scan the CSS, grab the speed of the animations, which properties have to be animated, and animate them ( using jQuery, or something else ), is there such a solution if so what is it and where can I obtain it ?

Answer 1

It is possible to detect supported CSS properties, provided you're aware in advance of what browser vendor prefixes you need to sniff for. I've written a gist for the mechanism:

https://gist.github.com/1096784

cssSandpaper is a JS library that aims to parse CSS and dynamically implement polyfills for various CSS3 effects:

http://www.useragentman.com/blog/csssandpaper-a-css3-javascript-library/

There is also a jQuery library that operates in reverse order, and silently implements transitions where possible when you call $.animate():

https://github.com/louisremi/jquery.transition.js