CSS Geçişler: Kenar Kaydırma Yerine Sol Yan Yana

Question

Bir bağlantıyı şekillendirdim; böylece, üzerine geldiğinizde üstte bir kenarlık görünecek; ve sınırın dışına çıktığınızda sınır geçişle ortadan kalkacaktır. Kenarın üzerine geldiğinizde ve kapandığında kenarlık kayboluyor. Kenarlığın slayt yerine kaybolmasını istiyorum. Bunu nasıl yapabilirim? İşte 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

Eğer rengini animasyonlu renk değil, bütün sınırı animasyon istiyorsanız olduğunu. Şimdi de 0 pikselden 3 piksele kadar animasyon yapıyorsunuz. Tabii ki içeride kayar. Bunun yerine varsayılan bir şeffaf kenarlık vermelisiniz.

Bir not olarak Sample on JSfiddle

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

: -moz-transition FF17 beri günümüzde kullanılmıyor ya da öylesine Mozilla öneki olmadan CSS Geçişler modülünü destekler.

Güncelleme Aralık 2014: Bu cevabı hala görüntülenmesiyle ve sık upvoted edilir fark olarak, transition artık any current or recently superseded browsers yılında öneki lütfen unutmayın.

Answer 2

Bu durumda - ile başlamaya da bir sınırınızın olması gerekecek. İlk durumda şeffaf hale getirin. Bu şekilde yerine "büyümek" olmaz ... ve renk değiştikçe soluklaşır.

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

div { 
    border: 3px solid transparent; 
} 

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