CSS transition not smooth

Question

Good Day

I am using the CSS transition effect on a hover selector, but the 2nd part of the transition is not smooth - When I hover over the element, it moves smoothly. When I exit hover, the element drops back non-elegantly (not smooth/timed). How do I fix it?

#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>

NOTE: look at my JSFIDDLE to see what I mean

Answer 1

As soon as you leave the div the :hover pseudo class is no longer satisfied. Thus the div loses the transition properties.

Simply move the transition block from #login:hover to #login and you are done.

Answer 2

You have to define also transition to normal state.

Edit: Like Raffael said it is only necessary to define transition effect in normal state

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

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

DEMO