CSS背景圖像淡出過渡只能在Chrome

HTML：CSS背景圖像淡出過渡只能在Chrome

<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.

來源

2016-03-05 Jonathan Prestinari

嘗試

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

來源

2016-03-05 15:12:22

謝謝，但它不起作用 –

https://jsfiddle.net/c048tgyp/2/是的，即不支持 –

小提琴不起作用太...懸停很好，但過渡不是... –

你不能動畫的背景圖像。 https://www.w3.org/TR/css3-transitions/#animatable-properties

來源

2016-03-05 15:13:47 Bogdan

然後我唯一的選擇是直接在HTML和動畫圖像中使用「img src」，這正是我想要避免的...... :-( –

我不明白，你真的需要過渡嗎？或者你只是想改變懸停的圖像？ – Bogdan

我真的需要過渡，懸停很好。 –

CSS背景圖像淡出過渡只能在Chrome

回答

相關問題