CSS3 Animation polyfill

Question

I'm looking to get a CSS3 animation to work; works fine in all major browsers but IE9 and older (no surprise there). So without further ado, here's the CSS :

#grosse_photo {
    /*...*/
    -webkit-animation: photoFade 12s infinite;
    -moz-animation:photoFade 12s infinite;
    -ms-animation: photoFade 12s infinite;
    animation-iteration-count:1;
    -moz-animation-iteration-count:1;
    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
}
    @-webkit-keyframes photoFade {
        0%   { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
    @-moz-keyframes photoFade {
        0%   { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
    @-o-keyframes photoFade {
        0%   { opacity: 0.0; }
        100% { opacity: 1.0; }
    }
    @keyframes photoFadee {
        0%   { opacity: 0.0; }
        100% { opacity: 1.0; }
    }

I used the -ms prefix thinking it would react like -webkit, but obviously IE (lte 9) didn't cooperate.

I also need elements to slide in, but since IE won't cooperate, I'm thinking I'm forgetting an obvious polyfill other than modernizr.

Though not optimal, I've seen many refer to jQuery alternatives, though I am still looking for a snippet which will allow for different animations at different times and speeds.

Answer 1

I don't think that there is a direct polyfill for animations, that you don't introduce the animation commands by javascript.

For that you can go to jquery animate(), or you can try this one, more new: http://www.polymer-project.org/platform/web-animations.html

If you need something for transition fallbacks, you can try: https://github.com/addyosmani/css3-transition-fallbacks