Using CSS3 Animations in IE9+

javascript css internet-explorer-9 css-animations
Mathew Hood picture Mathew Hood · Jan 30, 2012 · Viewed 42k times · Source

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

eivers88 picture eivers88 · Mar 5, 2013

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/

Related questions

How do I make an "else" in an IE HTML conditional?

<!--[if lt IE 9]> This is less then IE9 ELSE this is all browsers: firefox, chrome, etc. <![endif]--> How do I do this in my HTML? I want to do an "else" ...

Read More
IE9: Why setting "-ms-transform" works from css, but not with jquery.css()

This works div{ -ms-transform: rotate(30deg); } And following does not $("div").css("-ms-transform","rotate(30deg)"); Any ideas why, and how to fix it? Same thing works good on all other browsers, but not on IE. Ofcourse, only IE9 supports it. …

Read More
How do I add a class to a given element?

I have an element that already has a class: <div class="someclass"> <img ... id="image1" name="image1" /> </div> Now I want to create a JavaScript function that will add a class to the div (…

Read More