html - css transition 仅适用于 Firefox

Question

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

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。

Answer 1

正如@Tyriar 所说，对生成内容的转换/动画的支持是不完整的。它适用于最新的 Chrome Canary(版本 27.0.1444.3)，因此很快就会出现在常规 channel 中。届时，IE10、Firefox 4+ 和 Chrome 将支持它。 Safari 有一个明显的异常(exception)(和 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 本身上进行的，将其从白色淡化为透明以达到相同的效果。