CSS過渡不流暢

我使用懸停選擇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到明白我的意思

來源

2013-02-20 David Van Staden

一旦定義過渡效果，你離開的div：hover僞類是不更滿意。因此，div損失了轉換屬性。

只需將轉換塊從#login：hover移動到#login即可完成。

來源

2013-02-20 11:55:13 Raffael

感謝的人。欣賞。你是第一個，所以我會給你的觀點 – 2013-02-20 19:38:13

你必須定義也過渡到正常狀態。

編輯：像拉斐爾說，只需要在正常狀態

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

來源

2013-02-20 11:51:38 letiagoalves

謝謝你。感謝您的回答。 – 2013-02-20 19:37:56

CSS過渡不流暢

回答

相關問題