Использование перехода mouseout в css3

Question

Я использовал переход, чтобы сделать простой переход «underline» (его фактически border-bottom), когда он наводится на вас, вы получите border-bottom в действии, и вы увидите, как он выскочит. Однако есть проблема с эффектом перехода «mouseout», когда я отключаю мышь от li > a:hover, она исчезает без какого-либо эффекта.

CSS3 Код:

/*Menu*/ 
#menu{ 
    float: right; 
    margin: -60px 0px 0; 
} 

#menu ul{ 
    list-style-type:none; 
} 

#menu ul li{ 
    display: inline; 
    padding-right: 20px; 
} 

#menu ul li a{ 
    display: inline-block; 
    text-decoration: none; 
    color: #a1a1a1; 
    font-size: 19px; 
    padding-bottom: 7px; 
} 
#menu li > a:hover { 
    transition: all 0.5s ease 0s; 
    text-decoration: none; 
    border-bottom: 1px solid #fff; 
    padding-bottom: 2px; 
} 

Q: Как я могу получить MouseOut эффект перехода в CSS3?

Answer 1

Поместите переход в исходное состояние, а не только на :hover. Кроме того, если вы хотите, чтобы оживить обратно не границ, вам нужна граница там, просто сделать его прозрачным (или 0px широким):

#menu ul li a{ 
    display: inline-block; 
    text-decoration: none; 
    color: #a1a1a1; 
    font-size: 19px; 
    padding-bottom: 7px; 
    border-bottom: 1px solid transparent; 
    transition: all 0.5s ease-in-out; 
} 

JSFiddle