图像转换不能在Firefox中工作 [英] Image transitions not working in firefox

问题描述

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; 
转换期限：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; 
转换期限：0.7s; 
 
  

解决方案

据 w3c动画属性列表背景图像不是动画属性。尽管Chrome等浏览器支持这种交叉淡化行为。

对于firefox， bug 546052 是为这种过渡提交的。

然而你可以通过做一些技巧在以下链接中描述：

CSS3背景图片过渡

CSS3淡入淡出效果

http://jsfiddle.net/Lnykg/

When you hover over the image its supposed to fade transition into the other image, but in firefox the transition is broken. I tried adding a top: 0px; which was suggested from a similar question asked, but still doesn't work.

.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;
} 

解决方案

According to w3c list of animatable properties background-image is not an animatable property. Although some browsers like chrome support this cross-fading behavior.

For firefox, bug 546052 is filed for this kind of transition.

However you can achieve what you want by doing some tricks that are described at the following links:

CSS3 background image transition

CSS3 Fade Effect

这篇关于图像转换不能在Firefox中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！