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

悬停效果在每个浏览器中都可以正常工作，但过渡效果仅适用于谷歌浏览器，我真的无法解释为什么。我已经尝试过使用精灵图像和伪元素悬停，但我的图像具有透明背景，因此在悬停时，"底部"图像仍然部分可见。知道吗？

提前谢谢你。问候J.

Answer 1

尝试

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

Answer 2

您无法对背景图像进行动画处理。 https://www.w3.org/TR/css3-transitions/#animatable-properties