CSS переход не является гладким

Question

Good Day

Я использую эффект перехода 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 теряет свойства перехода.

Просто переместите блок перехода из #login: наведите курсор на #login, и все готово.

Answer 2

Вы должны также определить переход к нормальному состоянию .

Edit: Как 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; 
}