CSS3动画polyfill

Question

我想要一个CSS3动画工作; 在所有主流浏览器中工作正常,但IE9和更旧(在那里并不奇怪).所以没有进一步的麻烦,这里是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; }
    }

我使用-ms前缀认为它会反应如此-webkit,但显然IE(lte 9)没有合作.

我也需要元素插入,但由于IE不会合作,我想我忘记了除了modernizr之外的明显的polyfill .

虽然不是最优的,但我已经看到很多人提到了jQuery替代品,尽管我仍在寻找一个片段,它允许在不同的时间和速度下使用不同的动画.

Answer 1

我不认为动画有直接的polyfill，你不通过javascript引入动画命令。

为此，您可以转到 jquery animate()，或者您可以尝试这个，更多新功能： http: //www.polymer-project.org/platform/web-animations.html

如果您需要过渡回退的东西，您可以尝试： https://github.com/addyosmani/css3-transition-fallbacks