PolyFill/Shim For CSS Transitions And Animations

Google is failing me somewhat on this (I think because the terminology for PolyFill/Shim/Spackle is new and diverse at the moment). I'm trying to find a good JavaScript PolyFill or

Solution 1:

There is a very good CSS3 transition polyfill for jQuery called jQuery.transition.

You can just use the usual animate() method in jQuery, and it will automatically use CSS3 transitions if available, and if not, it will fall back to vanilla jQuery.

Solution 2:

Google's Polymer Project includes a Web Animations polyfill for the draft W3C Web Animations spec.

Caveat emptor: This is pretty early work, as the W3C spec is only a Public Working Draft, so anything could change. Also, the Polymer polyfills look like they're targeting only the latest version of browsers (e.g. IE10+) so it may not suit your needs. Still, this is early on in the project, so keep an eye on it and experiment.

If you're careful to test the platforms your users are on, you could take advantage of the future web today.