CSS background-image 淡入淡出过渡仅适用于 Chrome答案

【问题标题】：CSS background-image fade transition works only in ChromeCSS background-image 淡入淡出过渡仅适用于 Chrome
【发布时间】：2016-03-05 23:13:47
【问题描述】：

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

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

提前谢谢你。问候， J.

【问题讨论】：

标签： html css cross-browser css-transitions

【解决方案1】：

试试

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

【讨论】：

【解决方案2】：

您不能为背景图像设置动画。 https://www.w3.org/TR/css3-transitions/#animatable-properties

【讨论】：

那么我唯一的选择是在 HTML 中使用“img src”并直接为图像设置动画，这正是我想要避免的...... :-(
我不明白，你真的需要过渡吗？或者您只想更改悬停时的图像？
我真的需要过渡，悬停就可以了。