Firefox中的crossfade背景图像与CSS不起作用

我知道这已被提出，但它从未解决。Firefox中的crossfade背景图像与CSS不起作用

有谁知道如果你可以在Firefox中交叉淡入淡出背景图片吗？我知道你可以在chrome和explorer中做背景图片动画，但是它在FF中似乎没有效果。它使用颜色而不是图像。我不使用jQuery

这里是我的网站：http://www.moniquepompe.com

这里是我的代码，请大家帮忙！：

body{ 
background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover;} 
animation:myfirst 5s infinite; 
-moz-animation: myfirst 5s infinite; /* Firefox */ 
-webkit-animation:myfirst 5s infinite; /* Safari and Chrome */ 
-o-animation:myfirst 5s infinite; /* Opera */; 
-webkit-background-size: cover;} 


@keyframes myfirst 
{0% {background:url('http://moniquepompe.com/wp- content/uploads/2013/02/background_1.png')} 
25% {background:url('http://moniquepompe.com/wp- content/uploads/2013/02/background_2.png')} 
75% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_3.png')} 
100% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
} 

@-moz-keyframes myfirst /* Firefox */ 
{ 
0% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
25% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_2.png')} 
75% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_3.png')} 
100% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
0% {background:url('http://moniquepompe.com/wp- content/uploads/2013/02/background_1.png')} 
25% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_2.png')} 
75% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_3.png')} 
100% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
} 

@-o-keyframes myfirst /* Opera */ 
{ 
0% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
25% {background:url('http://moniquepompe.com/wp- content/uploads/2013/02/background_2.png')} 
75% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_3.png')} 
100% {background:url('http://moniquepompe.com/wp-content/uploads/2013/02/background_1.png')} 
}

来源

2013-02-19 molly polenta

，我想出了一个临时的解决方案，但它不是我所希望实现的。如果有解决我最初的问题，这仍然很好。谢谢。 – 2013-02-19 08:21:59

您是否找到解决方案？ – 2014-07-30 03:45:26

使用border属性。图像需要这么多的时间来加载，所以使用边界看到这个
jsfiddle.net/EucZM/

来源

2013-02-19 05:52:46

我想也许你回答了错误的问题？我的问题与边界无关。 – 2013-02-19 06:11:49

我知道你在问背景图片。它不适用于ff.SO我只是建议你请尝试边框。 – 2013-02-19 06:48:03

好，谢谢Pawan。在这种情况下边界不适合我，但无论如何要感谢。 – 2013-02-19 07:19:09

Firefox中的crossfade背景图像与CSS不起作用

回答

相关问题