Flackern auf Fadein Text Hover

Question

Ich habe eine einfache Fadein CSS ... Ich möchte es so, wenn Sie den Mauszeiger über Text, der Rand-bottom verblasst. Allerdings, wenn ich schweben, verschwindet der Text kurz und dann verblasst mit die Grenze, so flackert es. Wie bekomme ich es, damit der Text beim Hover konstant bleibt und nur der Rand eingeblendet wird?

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

Die 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

Sie die Zeile border-bottom: 2px solid #000000; entfernen und stattdessen hinzufügen:

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

und auch all dies ändern:

from { opacity: 0; } 
to { opacity: 1; } 

zu

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

Sehen Sie diese Fiddle Referenz.

Alternativ kann, wie in den Kommentaren von @Paulie_D vorgeschlagen können Sie auch tun, nur:

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

die offensichtlich alles viel einfacher macht.

Fiddle für die zweite Version