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移动过渡块：将鼠标悬停在#login上即可完成。

Answer 2

您还必须定义过渡到正常状态。

编辑像Raffael所说，只需要在正常状态下定义过渡效果

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

CSS过渡不顺畅

2 个答案: