27

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 Shim for webkit's (and now as of the RC FireFox 4's) CSS transitions.

I have found this work that Weston Ruter did, but it hasn't been updated in a while, and uses browser detection as opposed to feature detection.

I also uncovered FakeSmile but it is geared mostly to SVG animation.

Does anyone know of any good libraries to fill in this functionality? Preferably something that would work with Modernizr and is still being actively worked on. So far the best option looks like starting with what Weston came up with.

Graham Conzett
  • 8,344
  • 11
  • 55
  • 94
  • Looking for the same thing... Nothing on [Modernizr polyfills list](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills) (yet?). – saadtazi Apr 06 '11 at 01:38
  • Perhaps you could clarify the question somewhat. What have you tried so far? What functionality are you looking for? In what ways do the existing solutions not meet your needs? – KatieK Apr 07 '11 at 18:30
  • I think the OP is asking for something to polyfill the CSS functionality, so that animations can be declared in the CSS. The jQuery.transition polyfill is for using CSS3 animations to accelerate the jQuery.animate function. That way of doing things has the animations declared in the JavaScript, not the CSS. – Michael Cordingley Oct 21 '13 at 18:06

2 Answers2

20

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.

Brandon Rhodes
  • 83,755
  • 16
  • 106
  • 147
Sindre Sorhus
  • 62,972
  • 39
  • 168
  • 232
  • 9
    This is kind of backward from what the OP is looking for, but +1 anyway, since in many cases you do want this functionality in JavaScript instead of CSS. (There are definitely cases where CSS is more appropriate though, e.g. transitioning between normal and `:hover` states.) – Domenic Apr 10 '11 at 01:01
  • 2
    I know, but the best polyfill is actually this way. The other way is by loading and parsing the stylesheet, and extracting the transition parameters and converting them to JavaScript. Something that is quite resource hungry. – Sindre Sorhus Apr 10 '11 at 01:11
  • 1
    Thank you for pointing me to this polyfill - I had been struggling with other buggy plugins that gave me nothing but grief. This one works beautifully. – Oskar Austegard Dec 03 '11 at 00:03
  • @SindreSorhus parsing a CSS file doesn't seem that resource hungry compared to what people are routinely now using Js for :) Do you know of any solution based on this "resource hungry" mechanism? It's exactly what I'm looking for and I'll probably end up coding something like this myself if I don't find any... – NeuronQ Nov 01 '13 at 08:11
  • jsbin please! (old browsers like IE8 are not supported by jsfiddle) – Adriano Apr 25 '14 at 08:08
5

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.

Anson
  • 6,575
  • 2
  • 39
  • 33