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