css - 幻灯片动画在 Firefox 25.0 中不起作用

Question

我正在运行一个 CSS3 动画，更改我页面上 div 的背景图像以进行幻灯片放映，并且在带有 -webkit- 前缀的 Chrome 和 Safari 中一切正常，但即使我的代码中有无前缀的版本它不想在 Firefox 中工作。谁能在我的代码中发现我遗漏的任何可能导致此问题的内容？

@keyframes slideshow
    {
0%      {background-image: url(Images/sl1.jpg);}
8.3%        {background-image: url(Images/sl2.jpg);}
16.7%       {background-image: url(Images/sl3.jpg);}
25%     {background-image: url(Images/sl4.jpg);}
33.3%       {background-image: url(Images/sl5.jpg);}
41.7%       {background-image: url(Images/sl6.jpg);}
50%     {background-image: url(Images/sl7.jpg);}
58.3%       {background-image: url(Images/sl8.jpg);}
66.7%       {background-image: url(Images/sl9.jpg);}
75%     {background-image: url(Images/sl10.jpg);}
83.3%       {background-image: url(Images/sl11.jpg);}
91.7%       {background-image: url(Images/sl12.jpg);}
100%        {background-image: url(Images/sl1.jpg);}
}

@-webkit-keyframes slideshow
{
0%      {background-image: url(Images/sl1.jpg);}
8.3%        {background-image: url(Images/sl2.jpg);}
16.7%       {background-image: url(Images/sl3.jpg);}
25%     {background-image: url(Images/sl4.jpg);}
33.3%       {background-image: url(Images/sl5.jpg);}
41.7%       {background-image: url(Images/sl6.jpg);}
50%     {background-image: url(Images/sl7.jpg);}
58.3%       {background-image: url(Images/sl8.jpg);}
66.7%       {background-image: url(Images/sl9.jpg);}
75%     {background-image: url(Images/sl10.jpg);}
83.3%       {background-image: url(Images/sl11.jpg);}
91.7%       {background-image: url(Images/sl12.jpg);}
100%        {background-image: url(Images/sl1.jpg);}
}

#slideshow
{
float: right;
width: 80%;
height: 100%;
margin: 0;
padding: 0;
background-image: url(Images/sl1.jpg);
animation: slideshow 60s;
animation-iteration-count: infinite;
-webkit-animation: slideshow 60s;
-webkit-animation-iteration-count: infinite;
background-size: cover;
}

我正在使用 jquery 脚本将窗口大小输入到 css 中，以便图像保持在浏览器大小范围内，这会影响它吗？

<script src="/jquery-1.10.2.min.js"></script>
<script>
function windowH() {
var wH = $(window).height();

$('.sideBar, .slideshow').css({height: wH});
}

windowH();
</script>

非常感谢对此的任何帮助。非常感谢

Answer 1

显然，Firefox 尚不支持动画 background-image:

CSS3 animation and background-image in Firefox

您可以通过加载所有图像，然后使用 opacity 和 z-index 一次显示一个来实现您想要的效果。