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.

<!--[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!

Answer 2

You can try the reverse approach with JQuery Transit http://ricostacruz.com/jquery.transit/

It will map JQuery style transitions to CSS3 transitions and with the appropriate code (below), if the CSS3 transitions are not available then it may fallback gracefully to standard JQuery.

JQuery Transit uses a simple Javascript method, transition() to perform every operation. Syntax is very similar to to JQuery animate().

$('.box').transition({ opacity: 0 });

If you "map" transition() to JQuery animate() it will perform the same operation in standard JQuery (if available). The following code (taken from the example page) will use animate() if CSS3 transitions are not available:

// Delegate .transition() calls to .animate()
// if the browser can't do CSS transitions.

if (!$.support.transition)
  $.fn.transition = $.fn.animate;