缓入出功能不起作用，怎么办？答案

【问题标题】：Ease-in-out function doesn't work, what to do?缓入出功能不起作用，怎么办？
【发布时间】：2014-06-17 22:07:52
【问题描述】：

我所有的按钮都具有缓入缓出功能。它们都能正常工作，只有我的社交按钮无法正常工作。它们提供不透明度，但不提供 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;

}

【问题讨论】：

.contact-links { opacity: 0; }

标签： html css button opacity

【解决方案1】：

将过渡定位在 Anchor 元素上，并为非悬停状态添加默认不透明度。

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

【讨论】：

【解决方案2】：

您需要在.contact-links 上为opacity 定义一个值，否则您正在从未知值过渡，因此无法推断关键帧并且不会实现过渡。

您还需要在动画元素上定义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;
}

【讨论】：