CSS转换只在Firefox

工作我试图使用CSS转换，使背景图像淡出我的菜单上，当你在它悬停。我想要它花费大约2秒钟来淡化它。它可以在Firefox中正常工作，但在其他浏览器上它只是立即出现。在IE中它根本不起作用，但我并不担心，因为我从来没有想到它会起作用。CSS转换只在Firefox

CSS布局

.mainmenu ul li{ 
    height: 86px; 
    display: inline-block; 
    margin: 0; 
    padding: 0; 
    z-index:1000; 
    position: relative; 
} 
.mainmenu li:after{ 
    content: ""; 
    opacity: 0; 
    -webkit-transition: opacity 1.5s; 
    -moz-transition: opacity 1.5s; 
    -o-transition:  opacity 1.5s; 
    -ms-transition:  opacity 1.5s; 
    transition:   opacity 1.5s; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
} 
.mainmenu li:hover:after{ 
     opacity: 1; 
}

CSS外观

.mainmenu li:after{ 
    background: url(../images/hover.png) no-repeat center bottom; 
}

HTML

<div class="mainmenu"><ul><li><a href=''>Home</a></li><li><a href=''>About Us</a></li><li><a href=''>Contact Us</a></li><li><a href=''>Blog</a></li><li><a href=''>Gallery</a></li></ul></div>

谁能帮助？除了IE浏览器之外，它还可以让图片显示出来，但是在Chrome，Safari和Opera上的淡入淡出效果会很好。如果我能得到它的工作，那么，我甚至可以考虑IE。

来源

2013-03-19 Richard Young

我不知道这是否会帮助，但我不喜欢的转变例如'transition：all ease 0.4s;'因为某些原因，在chrome中不起作用，即使我做了'-webkit-transition：所有缓解0.4s;'而是我必须这样做'-webkit-transition ：全部0.4s缓解;' – iConnor 2013-03-19 12:25:59

根据CSS技巧，这在Chrome 1/3/13中得到了修复，但在最新的Chrome上，测试用例似乎不适用于我。我绝对不会乐意支持这种功能的这种零散的支持。 http://css-tricks.com/transitions-and-animations-on-css-generated-content/ – 2013-03-19 12:36:49

作为@Tyriar状态，用于转换支撑/生成的内容的动画是不规则。它适用于最新的Chrome Canary（版本27.0.1444.3），因此很快它将在正规渠道上发布。当这种情况发生时，IE10，Firefox 4+和Chrome将支持这一功能。 Safari（和Opera，除了可能会改变的move to WebKit）还有一个明显的例外。

现在最强大的解决方案将避免试图转换:after内容，而是将其应用于您现有的某个元素。这会让你pretty good browser support达到68％。

这是你原来的例子的a fork。而不是使用生成的内容，我已经简化了CSS这样：

.mainmenu li { 
    position: relative; 
    display: inline-block; 
    height: 86px; 
    margin: 0; 
    padding: 0; 
    background: url(http://placekitten.com/g/100/100) no-repeat center bottom; 
} 

.mainmenu li a { 
    position: relative; 
    display: block; 
    height: 100%; 
    background: #fff; 
    transition: all 1.5s ease-in-out; 
} 

.mainmenu li a:hover { 
    background: transparent; 
}

在此，过渡是在a本身，衰落，从白色到透明以实现相同的效果。

来源

2013-03-19 12:42:31 CherryFlavourPez

这看起来不错。我会试一试，让你知道。感谢这样的qucik回复。 – 2013-03-19 16:09:01

这可以通过顶部或悬停上的渐变背景或背景图像来实现吗？ – 2013-03-19 17:00:55

不确定你究竟是什么，但你不能过渡渐变（还） - 请参阅[这个问题]（http://stackoverflow.com/questions/6542212/use-css3-transitions-with-gradient-backgrounds ）。 – CherryFlavourPez 2013-03-19 17:11:34

如前所述，在:psuedo元素的CSS转换不具有最大的支持。 http://css-tricks.com/transitions-and-animations-on-css-generated-content/

随着直HTML/CSS，你可以这样做，但你需要一个额外的元素巴掌，这里有一个快速的小提琴：http://jsfiddle.net/9uwVb/

来源

2013-03-19 12:48:23 jarmie

CSS转换只在Firefox

回答

相关问题