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来一次性显示一个图像，从而可以达到您想要的效果。

幻灯片动画无法在Firefox 25.0中运行

1 个答案: