与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悬停淡入淡出

回答

相关问题