0
编辑：如果我改变URL的颜色，可以开始工作！但不能解决为什么网址无法在Firefox中工作。Moz动画显示在萤火虫，但没有运行
我很欣赏那里有一些类似的问题，但没有答案解决了我的问题。
我的@keyframes动画在Firefox中不起作用，我尝试过，没有前缀，并打开萤火虫检查错误。
首先，代码。请注意，我包含了元素.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);
}
它然后重复这最后一部分。据推测，因为前缀和非前缀版本都受支持。
在此先感谢。
它适用于我FF 30上。[演示]（http://jsfiddle.net/t9c7z/） – Oriol
好吧，我也得到了它的工作使用的颜色 - 但图片网址不 - 虽然他们在铬- 有任何想法吗？ – DJC
我应该看到一个演示，以了解。也许你在Firefox中禁用了图片，或者广告拦截器阻止了它们，或者服务器没有为Firefox提供服务（用户代理内容协商）等等。 – Oriol