CODEWITHSUNDEEP
csscss-transitionspolyfills
Dadou
Dadou

Reputation: 1008

CSS3 Animation polyfill

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.

Upvotes: 5

Views: 8196

Answers (2)

fernandopasik
fernandopasik

Reputation: 10463

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

Upvotes: 2

user3172256
user3172256

Reputation: 41

IExplorer doesn't have opacity option, it has
filter:alpha(opacity=77);
which is basicly the same just compability for IE

Upvotes: 0

Related Questions