在CSS3动画背景图像用于Firefox(background-image for firefox

我在CSS制作关键帧动画。 动画似乎在Chrome是工作得很好的-webkit语法的支持。

@-webkit-keyframes title_toggle 
{
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

我想下面的代码的Firefox，但它不工作

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

请让我知道我会在FF这项工作。

这是CSS的一部分。

@-moz-keyframes title_toggle {
from { background-image:url(images/title.png); }
75%{ background-image:url(images/title_hover.png); }
to { background-image:url(images/title.png); }
}

.title{
    width:40%;
    height: 30%;
    position: absolute;
    top: 10%;
    left: 5%;
    background-size: 100% 100%;
    background-repeat:no-repeat;
    -webkit-animation-name: title_toggle;
    -webkit-animation-duration:5s;
    -webkit-animation-iteration-count:infinite;
    background-size: 100% 100%; 
     -moz-animation-name: title_toggle;
     -moz-animation-duration:5s;
     -moz-animation-iteration-count:infinite;
}

这就是HTML

<div class="title"></div>

Answer 1:

如果你问的是，缺乏不同的图像之间的交叉淡入淡出插值，这是一个非常新的除了没有被广泛尚不支持该规范。

Answer 2:

这不是工作，因为Firefox不支持背景图片的动画。 背景图像是不能设置动画。 Chrome浏览器有它自己的实现，但你不会得到它的工作的Firefox。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties

文章来源: background-image for firefox in CSS3 animations