緩入功能不起作用，該怎麼辦？

Question

我所有的按鈕都有緩出功能。他們全部工作，只有我的社交按鈕無法正常工作。他們給了不透明，但不是3s的緩和。

這是我有：

<div class="contact-links"> 
<a class="fb" href="https://www.facebook.com/cgiphart" target="_blank"><img src="images/icon_fb.png" width="40px" height="40px"></a> 
<a class="da" href="https://www.veavictis.deviantart.com" target="_blank"><img src="images/icon_da.png" width="40px" height="40px"></a> 
</div> 

.contact-links 
{ 
    position:absolute; 
    float:left; 
    -webkit-transition:all .3s ease-in-out; 
    -moz-transition:all .3s ease-in-out; 
    -ms-transition:all .3s ease-in-out; 
    -o-transition:all .3s ease-in-out; 
    transition:all .3s ease-in-out; 
} 


.contact-links a:hover 
{ 

    opacity: 0.5; 

} 

Answer 1

目標的轉變對錨元素，並添加默認不透明度非懸停狀態。

.contact-links a { 
    opacity:1; 
    position:absolute; 
    float:left; -webkit-transition:all .3s ease-in-out; 
    -moz-transition:all .3s ease-in-out; 
    -ms-transition:all .3s ease-in-out; 
    -o-transition:all .3s ease-in-out; 
    transition:all .3s ease-in-out; } 

Answer 2

您需要定義opacity上.contact-links的值，否則你是從一個未知的價值轉變，所以沒有關鍵幀可以推斷和過渡將不會被執行。

您還需要在正在動畫的元素上定義transition。下面的CSS應該可以工作：

.contact-links a{ 
    opacity:1; /* <-- any transitioning property needs a starting value */ 
    -webkit-transition:all .3s ease-in-out; 
    transition:all .3s ease-in-out; 
} 
.contact-links a:hover{ 
    opacity: 0.5; 
}