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.fr/v4.html

Is there a a way to get this working in IE9 ? putting a jQuery or any hack - some thing to get it to work in IE9.

Thanks

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.

<!--[if lte IE 9]>
    <script src="animation-legacy-support.js"></script>
<![endif]-->

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!