0

我正在运行 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>

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

4

1 回答 1

1

显然，background-imageFirefox 尚不支持动画：

Firefox 中的 CSS3 动画和背景图像

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

于 2013-11-03T14:01:18.140 回答