與CSS3懸停淡入淡出

任何人都可以讓我知道爲什麼我的元素不會淡入？與CSS3懸停淡入淡出

背景圖片正常動畫，但.home類只是出現而不是淡入？

謝謝，代碼片段如下。

#home { 
           width:35px; 
           height:35px; 
           float:left; 
           margin:20px 20px 0 20px; 
           transition:background-position .2s ease; 
           -webkit-transition: background-position .2s ease; 
           -moz-transition: background-position .2s ease; 
           background-image:url('images/icons.png'); 
         } 
#home > .home { 
           position:absolute; 
           display:none; 
           margin-top:40px; 
           opacity:0; 
           transition:opacity 3s linear; 
         } 
         #home:hover > .home { 
           display:block; 
           opacity:1; 
         } 
         #home:hover { 
           background-position:0px 35px; 
         } 

<!-- END STYLE START HTML --> 
<div id="home"><div class="home">HOME</div></div>

來源

2012-08-28 Matt

在懸停上添加轉場。

#home:hover > .home { 
    display:block; 
    opacity:1; 
    transition:opacity 3s linear; 
}

對於跨瀏覽添加切換：不支持

-moz-transition ... 
-webkit-transition ... 
-o-transition ...

-ms-。

來源

2012-08-28 08:19:29

-2

從W3Schools：「過渡屬性不支持在任何瀏覽器。」。相反，使用Firefox，Chrome，Safari和Opera的特定轉換屬性：http://www.w3schools.com/cssref/css3_pr_transition.asp

IE根本不支持此操作。

如果你想要真正的工作過渡，你應該考慮使用一個支持動畫像JQuery的JavaScript庫。

來源

2012-08-28 08:19:11 Endy

IE10支持它。 – robertc

@robertc我不認爲恩迪是在談論IE9或IE10 ...... –

它在W3Schools上表明：「Internet Explorer尚不支持轉換屬性。」並且還指出：「任何瀏覽器都不支持轉換屬性。」投票前請做好您的研究。 – Endy

與CSS3懸停淡入淡出

回答

相關問題