在css3中使用轉換鼠標

Question

我一直在使用轉換來製作簡單菜單「下劃線」（實際上是border-bottom）的轉換，當它懸停時，您將獲得border-bottom的實際操作，並且您會看到他彈出。 但是，轉換「鼠標移出」效果存在問題，當我將鼠標從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; 
} 

問：我怎樣才能在CSS3鼠標移開過渡效果？

Answer 1

將在初始狀態的過渡，不只是:hover。另外，如果要動畫回到沒有邊界，你需要一個邊界在那裏，只是使它透明（或0像素寬）：

#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