firefox - 图像转换在 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 动画属性列表background-image 不是动画属性。尽管某些浏览器（如 chrome）支持这种交叉淡入淡出行为。

对于 firefox，为这种转换提交了错误 546052 。

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

CSS3背景图片过渡

CSS3 淡入淡出效果