Using CSS3 Animations in IE9+

CSS3 Animation for IE9

Animation, transition and transformations are not supported in IE9 or lower. There is a support for them from IE 10+, but even in this case there are a lot of issues users find when working with IE. The best thing to do, is to work with javascript. With javascript you can avoid the CSS3 animations and run your results much better even in IE.

For looking at browser compatibility for animations, transitions and transformations look at this link: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#Browser_compatibility

I need CSS3 transition to work in IE9

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!

CSS3 animation not working in IE9

CSS3 Animation don't work natively on IE9. There's a similar thread here

CSS3 animation (keyframes) not working in IE9 and I study solution,Is there a way I can do this without using any prefix or library?

It is not supported in IE9.

Source: http://caniuse.com/#search=keyframe

Unfortunately, there are very few direct CSS workarounds.

It is better to do animations with the help of a javascript library as a workaround.
An example would be jquery animation effects:
http://api.jquery.com/category/effects/

Replicating a CSS3 animation in IE9

All sorted... I came across the following (I made my edits as needed). Posting this here in case anyone comes across it for future reference.

$(window).scroll(function(){
        if($(document).scrollTop() > 33)
        {
            if($('.fm-container').data('size') == 'big')
            {
                $('.fm-container').data('size','small');
                $('.fm-container').stop().animate({height:'60px'},200);
                $('.branding').stop().animate({width:'120px'},200);
                $('.logo-spacer').stop().animate({width:'120px'},200);
                $('.fm-container ul.prim-nav').stop().animate({marginTop:'8px'},200);
                $('.fm-container .highlight').stop().animate({opacity:'0'},200);
            }
        }
        else
        {
            if($('.fm-container').data('size') == 'small')
            {
                $('.fm-container').data('size','big');
                $('.fm-container').stop().animate({height:'85px'},200);
                $('.branding').stop().animate({width:'200px'},200);
                $('.logo-spacer').stop().animate({width:'200px'},200);
                $('.fm-container ul.prim-nav').stop().animate({marginTop:'30px'},200);
                $('.fm-container .highlight').stop().animate({opacity:'1'},200);
            }  
        }
});

CSS animation not working in Internet Explorer, specifically IE9

As you can see here, CSS Animations are not supported in IE9: http://caniuse.com/#feat=css-animation

---

Related Topics