CSS过渡不流畅

Question

好日子

我使用悬停选择CSS的过渡效果，但过渡的第二部分是不畅通 - 当我将鼠标悬停在元素，它平滑地移动。当我退出悬停时，该元素非优雅地退回（不平滑/定时）。我如何解决它？

CSS：

#login{ 
    margin-top: -10px; 
    margin-left: 10px; 
    display: inline-block; 
} 

#login:hover { 
    margin-top: 0px; 
    -webkit-transition: margin-top 0.2s ease-out; 
    -moz-transition: margin-top 0.2s ease-out; 
    -o-transition: margin-top 0.2s ease-out; 
    -ms-transition: margin-top 0.2s ease-out; 
} 

HTML：

<div id="login" class="span1"> 
    <a href="#">login</a> 
</div> 

注：看看我的JSFIDDLE到明白我的意思

Answer 1

一旦定义过渡效果，你离开的div：hover伪类是不更满意。因此，div损失了转换属性。

只需将转换块从#login：hover移动到#login即可完成。

Answer 2

你必须定义也过渡到正常状态。

编辑：像拉斐尔说，只需要在正常状态

DEMO

#login{ 
    margin-top: -10px; 
    margin-left: 10px; 
    display: inline-block; 
    -webkit-transition: margin-top 0.2s ease-out; 
    -moz-transition: margin-top 0.2s ease-out; 
    -o-transition: margin-top 0.2s ease-out; 
    -ms-transition: margin-top 0.2s ease-out; 
} 

#login:hover { 
    margin-top: 0px; 
} 

#login a{ 
    background: #003399; 
    font-size: 38px; 
    color: #fff; 
}