Moz 动画在 firebug 中显示，但未运行答案

【问题标题】：Moz animation showing in firebug, but not runningMoz 动画在 firebug 中显示，但未运行
【发布时间】：2014-03-25 09:29:03
【问题描述】：

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

然后它会重复最后一部分。大概是因为支持带前缀和不带前缀的版本。

提前致谢。

【问题讨论】：

它适用于 FF 30。Demo
好的，所以我也让它使用颜色工作 - 但图片 URL 不 - 尽管它们在 chrome 中 - 有什么想法吗？
我应该看一个演示才能知道。也许您在 Firefox 中禁用了图像，或者广告拦截器阻止了它们，或者服务器没有将它们提供给 Firefox（用户代理内容协商）等。
好吧，我不这么认为——因为显示的是第一张图片！
OP is correct，但this is a dupe.

标签： css html animation

【解决方案1】：

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

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

【讨论】：