Question

编辑：如果我将网址更改为颜色，可以开始工作！但无法弄清楚为什么网址在Firefox中不起作用。

我很欣赏有一些类似的问题，但没有答案解决了我的问题。

我的@keyframes动画在Firefox中不起作用，我尝试使用和不使用前缀，并打开firebug来检查错误。

首先是代码。注意，我包含了元素.runner的所有样式，因为它是阻止动画工作的代码的其他部分。

HTML

  <div class="runner">
  </div>

CSS

.runner {border-radius: 40pt ;
-webkit-box-shadow: 0 0 10pt grey ; 
-moz-box-shadow: 0 0 10pt grey ;
box-shadow: 0 0 10pt grey ; 
width:49.5% ; 
height: 49.5% ; 
position: absolute ; 
top:0 ; left: 0 ; 
background: url(img/pic1.png) ;
-webkit-animation: slideshow 20s infinite 2s ; 
-moz-animation: slideshow 20s infinite 2s ; 
animation: slideshow 20s infinite 2s}

@-webkit-keyframes slideshow {
20% {background:url(img/pic1.png)}
25%, 45% {background:url(img/pic2.png)}
50%, 70% {background:url(img/pic3.png)}
75%, 95% {background:url(img/pic4.png)}
}

@-moz-keyframes slideshow {
20% {background:url(img/pic1.png)}
25%, 45% {background:url(img/pic2.png)}
50%, 70% {background:url(img/pic3.png)}
75%, 95% {background:url(img/pic4.png)}
}

@keyframes slideshow {
20% {background:url(img/pic1.png)}
25%, 45% {background:url(img/pic2.png)}
50%, 70% {background:url(img/pic3.png)}
75%, 95% {background:url(img/pic4.png)}
}

这就是萤火虫所说的.runner

.runner {
animation: 20s ease 2s normal none infinite slideshow;
background: url("img/pic1.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
border-radius: 40pt;
box-shadow: 0 0 10pt #808080;
height: 49.5%;
left: 0;
position: absolute;
top: 0;
width: 49.5%;
}

@-moz-keyframes slideshow {
20% {
background: url("img/pic1.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
25%, 45% {
background: url("img/pic2.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
50%, 70% {
background: url("img/pic3.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}
75%, 95% {
    background: url("img/pic4.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
}

然后重复这最后一部分。大概是因为支持前缀和非前缀版本。

提前致谢。

Answer 1

经过进一步研究，似乎“背景”加上“背景图像”不被视为可以动画的对象。为什么这适用于chrome我不确定。

然而，将图像叠加在另一个之上，然后在图像上使用动画（而不是背景）可以用于生成相同的效果，每个图片具有不透明度和动画延迟。

Moz动画在firebug中显示，但没有运行

1 个答案: