Firefox 中的 CSS3 动画和背景图像 [英] CSS3 animation and background-image in Firefox

问题描述

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

I have a bit of CSS3 animation in my website, and it works fine on Safari but when I run the site in Firefox, it doesn't animate. Here is the code:

.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');}
 }
}

现在我注意到问题出现在网站点击

Now I've noticed that the issue arises when the site hits the

 background-image:url('');

如果我将这些更改为

 background:color;  

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

then it works, but obviously I want to use an image. I've tried adding -moz- prefixes, but it doesn't work. What am I missing? is there a way to make firefox acknowledge

Background-image:url('')

推荐答案

到目前为止，在背景图像之间进行插值的能力是一个相当新的提议，在浏览器中并没有得到很好的支持.Firefox 尚未实现它.

The ability to interpolate between background images is a pretty new proposal so far, and not well supported in browsers. Firefox doesn't implement it yet.

这篇关于Firefox 中的 CSS3 动画和背景图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！