图像转换无法在Firefox中运行

Question

http://jsfiddle.net/Lnykg/

当您将鼠标悬停在图像上时，它应该淡入过渡到另一个图像，但在Firefox中，转换会被破坏。我尝试添加一个顶部：0px;这是从一个类似的问题提出的，但仍然无效。

.infidus {
    margin-left: 0px;
    top: 0px;
    width:698px;
    height:300px;
    background: url();
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
}

.infidus:hover {
    margin-top: 0px;
    top: 0px;
    width:698px;
    height:300px;
    background: url();
    -moz-transition-duration: 0.7s;
    -webkit-transition-duration: 0.7s;
    transition-duration: 0.7s;
} 

Answer 1

根据w3c list of animatable properties背景图片不是动画属性。虽然像Chrome这样的浏览器支持这种交叉淡化行为。

对于firefox，bug 546052是为此类过渡而提交的。

但是，您可以通过以下链接中描述的一些技巧来实现您的目标：

CSS3 background image transition

CSS3 Fade Effect