Firefox中的交叉淡入淡出背景图像，CSS不起作用答案

【问题标题】：crossfade background image in firefox with CSS not workingFirefox中的交叉淡入淡出背景图像，CSS不起作用
【发布时间】：2013-02-03 17:09:31
【问题描述】：

我知道以前有人提出过这个问题，但从未解决。

有人知道你是否可以在 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')}
}

【问题讨论】：

我想出了一个临时解决方案，但这不是我希望实现的。如果我的原始问题有解决方案，那仍然会很好。谢谢。
你找到解决办法了吗？

标签： css firefox background jquery-animate transition

【解决方案1】：

使用边框属性。图片需要很长时间才能加载，所以使用边框看到这个
jsfiddle.net/EucZM/

【讨论】：

我想你可能回答错了问题？我的问题与边界无关。
我知道您要的是背景图片。它在 ff 中不起作用。所以我只是建议你试试边界。
好的，谢谢帕万。在这种情况下，边框对我不起作用，但无论如何谢谢。