閃爍的淡入淡出文字懸停

Question

我有一個簡單的淡入淡出的CSS ...我喜歡它，所以當你將鼠標懸停在文本上，邊框底部淡入。但是，當我懸停時，短暫消失然後淡入邊界，所以它閃爍。如何獲取它，以便懸停時文本保持不變，只有邊框淡入？

的CSS

.nav li a:hover{ 
border-bottom: 2px solid #000000; 
-webkit-animation: fadein .5s; /* Safari and Chrome */ 
-moz-animation: fadein .5s; /* Firefox */ 
-ms-animation: fadein .5s; /* Internet Explorer */ 
-o-animation: fadein .5s; /* Opera */ 
animation: fadein .5s; 
} 

@keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Firefox */ 
@-moz-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Safari and Chrome */ 
@-webkit-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Internet Explorer */ 
@-ms-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

/* Opera */ 
@-o-keyframes fadein { 
    from { opacity: 0; } 
    to { opacity: 1; } 
} 

的HTML

<ul class="nav navbar-nav"> 
    <li> <a href="#" role="button" aria-expanded="false">About</a></li> 
    <li> <a href="#" role="button" aria-expanded="false">Services</a></li> 
    <li> <a href="#" role="button" aria-expanded="false">Portfolio</a></li> 
    <li> <a href="#" role="button" aria-expanded="false">Contact</a></li> 
</ul> 

Answer 1

你可以刪除行border-bottom: 2px solid #000000;，而是添加：

.nav li a { 
    border-bottom: 2px solid rgba(0,0,0,0); 
} 

，改變了這一切：

到

from { border-bottom-color: rgba(0,0,0,0); } 
to { border-bottom-color: rgba(0,0,0,1); } 

看到這個Fiddle以供參考。

另外，如由@Paulie_D意見建議你也可以只是做：

.nav li a { 
    border-bottom: 2px solid rgba(0,0,0,0); 
} 

.nav li a:hover{ 
    border-bottom: 2px solid rgba(0,0,0,1); 
    -webkit-transition: border-bottom .4s ease; 
    -moz-transition: border-bottom .4s ease; 
    -ms-transition: border-bottom .4s ease; 
    -o-transition: border-bottom .4s ease; 
    transition: border-bottom .4s ease; 
} 

這顯然使得一切變得更加簡單。

Fiddle第二版