Using CSS3 Animations in IE9+

Question

I have been trying to get these css3 animations to work in IE9 for a few hours today and I am stumped!

I tried implementing a few JavaScript fallbacks but my knowledge is very limited so they failed. I am unsure if it was failing due to my user errors or code errors.

Here is a jsFiddle of my code so far, I have replaced the background images with colours. Basically the green and black squares rotate in Firefox and Webkit browsers.

http://jsfiddle.net/fJxsV/

I want to have it running on IE9 also.

If you can please help me with this I would be very grateful!

Answer 1

I would use Modernizr to detect when css animations are not supported. With Modernizr, it's as simple as:

if(!Modernizr.cssanimations) {
    //jQuery fallback 
}

As for rotating with jQuery I would use: http://jqueryrotate.com/