CSS过渡缓出不起作用答案

【问题标题】：CSS transition ease-out not workingCSS过渡缓出不起作用
【发布时间】：2013-01-23 20:28:03
【问题描述】：

好的，所以我不明白为什么这没有缓解，只是在：（例如，为了快速查看，只需将其粘贴到 http://htmledit.squarefree.com）

<style>
#over {
background: url(http://th01.deviantart.net/fs71/150/f/2013/005/0/6/dal_shabet__have__don_t_have_by_awesmatasticaly_cool-d5qkzu8.jpg);
height:150px;
width:150px;
}

#in {
background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
height:150px;
width:150px;
}

#in:hover {
opacity: 0;
transition: opacity .3s ease-in-out;
}

</style>

<div id="over">
<div id="in"></div
</div>

【问题讨论】：

标签： transition

【解决方案1】：

我不确定你到底在问什么，但我认为你是说过渡只发生在鼠标悬停时，而不是当你鼠标移开时（它只是恢复到以前的方式，而不是过渡）。您需要将您的转换属性添加到#in，而不是#in:hover。仅当您的 #in 元素悬停时才会发生转换。将 css 移动到 #in 下进行过渡，它将在鼠标悬停和鼠标移出时起作用。您希望将悬停状态的所需 css 保留在 #in:hover 下，在这种情况下，不透明度会发生变化，但实际的过渡 css 属性将位于 #in 下。

为了更清楚一点：

#in {
    background: url(http://www.mygrafico.com/images/uploads/thumbs/thumb_revidevi_CoolMonsterTruck.jpg);
    height:150px;
    width:150px;
    transition: opacity .3s ease-in-out; /* add this here */
}

#in:hover {
    opacity:0;
    /* and we've removed it from here */
}

要知道的是，缓入出与何时转换无关。看起来，缓入是悬停，缓出是鼠标悬停，但实际上，缓入意味着它会慢慢缓入和缓出，而不是像缓入那样缓和慢慢地进入过渡，然后加速接近尾声。它与过渡本身的风格有关，而不是何时发生。

也许您已经明白这一点，但根据您的问题，您似乎对此感到困惑。

【讨论】：

为了向其他人澄清，您将opacity: 0; 留在#in:hover 中，并将转换移动到#in。
漂亮，15秒通过谷歌找到这个，25秒后解决问题
@Franklin De Los Santos 很高兴听到这个消息！

【解决方案2】：

我发现@welbornio 的答案对我有用，但缓入出局起初并不完美。当应用于“img”时，缓解效果只能间歇性地起作用。我发现为了让效果每次都能发挥作用，我必须将缓入应用于“img”，将缓出应用于“悬停”。我不确定为什么会发生这种情况，但如果有人遇到同样的问题，这是一个解决方案。

【讨论】：