CSS3动画和背景图片在Firefox [英] CSS3 animation and background-image in Firefox

问题描述

我有一点CSS3动画在我的网站，并能正常工作在Safari，但是当我运行在Firefox网站，它没有动画。这里是code：

  .ad {
位置：相对;
左：740px;
顶部：320x240像素;
宽度：260px;
高度：195px;
背景图像：网址（'ad1.png'）;动画：myfirst 4S;-webkit-动画：myfirst 4S; / * Safari和Chrome * /
-webkit-动画延迟：2秒;
-webkit-动画持续时间：0;
-webkit-动画填充模式：前锋;
}@keyframes myfirst {
  从{背景图像：网址（'ad1.png'）}
  为{背景图像：网址（'ad2.png'）} }
@ -webkit-关键帧myfirst / * Safari和Chrome * /
 {
  从{背景图像：网址（'ad1.png'）;}
  为{背景图像：网址（'ad2.png'）;}
 }
}
 

现在我注意到，当网站打

问题的出现

 背景图像：网址（''）;
 

如果我要改变这些以

 背景：彩色;
 

那么它的工作原理，但很明显，我想使用的图像。我已经尝试添加-moz- prefixes，但它不工作。我在想什么？有没有一种方法，使火狐承认

 背景图像：网址（''）
 

解决方案

背景图像进行插补的能力是pretty新的建议，到目前为止，并没有在浏览器很好的支持。 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('');

if I were to change these to

 background:color;  

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('')

解决方案

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.

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