Question

当你将鼠标悬停在我的菜单上时，我正在尝试使用CSS过渡来使背景图像淡入。我希望它花费大约2秒钟来淡化它。它在Firefox中完美运行，但在其他浏览器上它只是立即出现。在IE中，它根本不起作用，但我并不担心，因为我从没想过它会起作用。

CSS LAYOUT

.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。

Answer 1

正如@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本身，从白色渐变到透明，以达到相同的效果。

Answer 2

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

使用直接的html / css你可以做到这一点，但你需要打一个额外的元素，这是一个快速的小提琴：http://jsfiddle.net/9uwVb/

css过渡只能在Firefox中使用

2 个答案: