html - CSS 背景图像淡入淡出过渡仅适用于 Chrome

Question

HTML:

<a class="navbar-brand page-scroll" href="#intro"></a>

CSS:

.navbar-custom .nav li a.navbar-brand {
    width: 70px;
    height: 62px;
    background: url(myimg.png) no-repeat;
    background-size: 70px 62px;
    display: block;
    position: relative;
    text-indent: -9999px;
    -webkit-transition: all .2s linear;
    -moz-transition: all .2s linear;
    -o-transition: all .2s linear;
    -ms-transition: all .2s linear;
    transition: all .2s linear;
}
.navbar-custom .nav li a.navbar-brand:hover {
    background: url(myimghover.png) no-repeat;
}

悬停效果在所有浏览器中都能正常工作，但过渡效果仅在谷歌浏览器中有效，我真的无法解释原因。我已经尝试过使用 sprite 图像和伪元素悬停，但我的图像具有透明背景，因此在悬停时，“底部”图像仍然部分可见。有什么想法吗？

提前致谢。问候，J.

Answer 1

尝试

-webkit-transition-duration: 0.2s;
-moz-transition-duration: 0.2s;
-o-transition-duration: 0.2s;
transition-duration: 0.2s;