CSS 过渡不流畅

Question

再会

我在悬停选择器上使用 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;
 }
#login a{
    background: #003399;
    font-size: 38px;
    color: #fff;
}

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

注意:看看我的 JSFIDDLE明白我的意思

Answer 1

一旦您离开 div， :hover 伪类就不再满足。因此 div 失去了过渡属性。

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