CSS3 动画填充

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 之外的明显填充。

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

Answer 1

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

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

如果您需要一些用于转换回退的内容，您可以尝试：https://github.com/addyosmani/css3-transition-fallbacks

Answer 2

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