3

我的网站中有一些 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('')
4

3 回答 3

3

根据规范的最新工作草案(2015 年 8 月 14 日),background-image被定义为不可动画。

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

于 2014-02-24T13:22:45.940 回答
2

到目前为止,在背景图像之间插入的能力是一个相当新的提议,并且在浏览器中没有得到很好的支持。Firefox 还没有实现它。

于 2013-07-22T01:45:28.210 回答
-2

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

于 2013-07-21T17:11:26.770 回答