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

Answer 2

IExplorer没有不透明度选项，它有过滤器：alpha（不透明度= 77）;
这基本上与IE的兼容性相同

CSS3动画polyfill

2 个答案: