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的浏览器的行为是非标准的，不应该依赖。

Answer 2

到目前为止，在背景图像之间进行插值的能力是一项非常新的提议，并且在浏览器中得不到很好的支持。 Firefox还没有实现它。

Answer 3

使用@ -moz-keyframes 和-moz-animation 为firefox定义动画

Firefox中的CSS3动画和背景图像

3 个答案: