I need CSS3 transition to work in IE9

Question

I create a greeting card for a client with css transition but I did not know that it was not compatible with IE9.

The greeting card is this http://voeux.geekarts.f

Answer 1

As you've properly identified, Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations. That being said, it was also the last of the IE browsers to support conditional comments, so you could conceivably put fallback code into an IE9-only conditional comment, and deliver that as your solution to all IE9 (and below) users.

This, of course, would only be delivered in the browser is Internet Explorer 9 or below. Now, all you have left to do is setup the jQuery animation itself. For example, we could run an image through a series of transitions like this:

(function () {

    "use strict";

    $("img.kitten")
        .animate({ width:   300 }, 1000)  // Animate to 300px wide
        .animate({ width:    50 }, 2000)  // Then, to 50px wide
        .animate({ opacity: .25 }, 1000); // Then, make it semi-transparent

}());

Each time you need to setup another keyframe, just add another call to $.fn.animate and setup your target state, as well as the animation duration.

One important thing to note is that you'll need to load in a version of jQuery that supports your target IE versions. jQuery 2.x only supports Internet Explorer 9 and up, however, jQuery 1.x supports Internet Explorer versions 6 and up.

Hope this helps!