CSS轉換：邊框幻燈片而不是褪色

Question

我設計了一個鏈接，以便當您將它懸停時，會在頂部顯示一個邊框;當你懸停在邊界上時會隨着過渡而消失。當您將鼠標懸停在其上並關閉時，邊框將滑入而不會消失。我希望邊框淡入而不是幻燈片。我怎樣才能做到這一點？這裏是一個JsFiddle

HTML

<div>Text</div> 

CSS

div { 
    line-height: 50px; 
    width: 100px; 
    text-align: center; 
    cursor: pointer; 
    transition: border .2s ease-in-out; 
    -webkit-transition: border .2s ease-in-out; 
    -moz-transition: border .2s ease-in-out; 
} 

div:hover { 
    border-top: 3px solid #000; 
} 

html, body { 
    margin: 0; 
    padding: 0; 
} 

Answer 1

如果你想動畫的顏色，動畫的顏色，而不是整個邊界。您現在也將其從0像素移動到3像素，因此它當然會滑入。您應該只給它一個默認的透明邊框。

div { 
    line-height: 50px; 
    width: 100px; 
    text-align: center; 
    cursor: pointer; 
    transition: border-color .5s ease-in-out; 
    border-top: 3px solid transparent; 
} 

div:hover { 
    border-top-color: #000; 
} 

Sample on JSfiddle

作爲旁註：-moz-transition是過時的現今，由於FF17左右Mozilla的支持，而不前綴CSS過渡模塊。

更新2014年12月：我注意到了這個答案仍在觀察和頻繁upvoted，請注意transition不再在any current or recently superseded browsers前綴。

Answer 2

在這種情況下 - 您將需要有一個邊界以及開始。在第一個狀態下使其透明。這樣它就不會「長出」到位......而且顏色會隨着它的變化而消失。

http://jsfiddle.net/kLnQL/11/

div { 
    border: 3px solid transparent; 
} 

div:hover { 
    border: 3px solid #f06; 
}