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

Question

编辑:如果我将 url 更改为颜色，就可以开始工作了!但无法弄清楚为什么这些网址在 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)}
}

这就是 Firebug 对 .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。

但是，将图像一个接一个地堆叠起来，然后在图像上使用动画(而不是背景)可以产生相同的效果，每张图片都有不透明度和动画延迟。