PolyFill/Shim for CSS transitions and animations

javascript html css polyfills css-transitions
Graham Conzett picture Graham Conzett · Mar 17, 2011 · Viewed 14.7k times · Source

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.

Answer

Sindre Sorhus picture Sindre Sorhus · Apr 10, 2011

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.

Related questions

Modernizr with Respond.js

I am carefully assessing the best way to utilize Modernizr and Respond.js for responsive design and have a couple of questions for the community. Firstly, it is my understanding that when bundling Modernizr with Respond.js, no other coding …

Read More
Retrieve the position (X,Y) of an HTML element relative to the browser window

I want to know how to get the X and Y position of HTML elements such as img and div in JavaScript relative to the browser window.

Read More
Set cookie and get cookie with JavaScript

I'm trying to set a cookie depending on which CSS file I choose in my HTML. I have a form with a list of options, and different CSS files as values. When I choose a file, it should be saved …

Read More