Firefox 中的 CSS3 动画和背景图像

Question

我的网站中有一些 CSS3 动画，它在 Safari 上运行良好，但当我在 Firefox 中运行该网站时，它没有动画。这是代码:

.ad{
position:relative;
left:740px;
top:240px;
width:260px;
height:195px;
background-image:url('ad1.png');

animation:myfirst 4s; 

-webkit-animation:myfirst 4s; /* Safari and Chrome */
-webkit-animation-delay:2s;
-webkit-animation-duration:0s;
-webkit-animation-fill-mode: forwards;
}

@keyframes myfirst 

 {
  from {background-image:url('ad1.png')}
  to {background-image:url('ad2.png')}

 }


@-webkit-keyframes myfirst /* Safari and Chrome */
 {
  from {background-image:url('ad1.png');}
  to {background-image:url('ad2.png');}
 }
}

现在我注意到当网站点击

 background-image:url('');

如果我要将这些更改为

 background:color;  

然后就可以了，但显然我想使用图像。我试过添加 -moz- 前缀，但它不起作用。我错过了什么？有没有办法让 firefox 承认

Background-image:url('')

Answer 1

根据latest working draft of the spec (2015 年 8 月 14 日)，background-image 被定义为不可设置动画。

然后，Firefox 只是遵循规范，动画 background-image 的浏览器的行为是非标准的，不应依赖。