Эффект зависания мерцает с помощью CSS

Question

Я пытался сделать простой эффект зависания на фоне элемента, но когда курсор находится на элементе, перед тем как завершить весь переход на фоне, фон на несколько секунд мерцает, затем мерцание прекращается.

div.nav {float:left;}
div.nav ul{list-style-type: none;
           margin: 0;
           padding: 0;
           width: 180px;}
div.nav ul li{border:1px solid #EAEAEA;}
div.nav ul li a {display:inline-block;
                 color: black;
                 width:180px;
                 margin:0 auto;
                 padding:50px 0;
                 text-decoration: none;
                 text-align:center;
                 text-transform:uppercase;
                 box-shadow: inset 0 0 0 0 gold;
		         -webkit-transition: linear 1s;
                 -moz-transition: linear 1s;
                 transition: linear 1s;
		         cursor:pointer;}
div.nav ul li a:hover{  box-shadow: inset 400px 0 0 0 gold;}
div.nav ul li a i{display:block;
                 margin-bottom:5px;}	

 <div class="nav">
       <ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
   </div>

Я пытался найти причину мерцания, но изменил отступы и ширину, но не смог найти.

Answer 1

Я думаю, что это может быть полезно: Скользящий фоновый эффект

Однако, я надеюсь, что это может помочь:

div.nav {
  float: left;
}

div.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 180px;
}

div.nav ul li {
  border: 1px solid #EAEAEA;
}

div.nav ul li a {
  display: inline-block;
  color: black;
  width: 180px;
  margin: 0 auto;
  padding: 50px 0;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  background-image: linear-gradient(to right, gold, gold 50%, transparent 50%, transparent);
  background-position: 100% 0;
  background-size: 200% 100%;
  transition: all .5s ease-out;
}

div.nav ul li a:hover {
  background-position: 0 0;
}

div.nav ul li a i {
  display: block;
  margin-bottom: 5px;
}

<div class="nav">
  <ul>
    <li>
      <a href="#"> <i class="fa fa-user"></i>About Me</a>
    </li>
    <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
    <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
    <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
  </ul>
</div>

Answer 2

Не используйте box-shadow, но создайте псевдоэлемент с абсолютным позиционированием с помощью :before, который затем можно анимировать

div.nav {
  float:left;
}
div.nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 180px;
}
div.nav ul li {
  border:1px solid #EAEAEA;
}
div.nav ul li a {
  display:inline-block;
  color: black;
  width:180px;
  margin:0 auto;
  padding:50px 0;
  text-decoration: none;
  text-align:center;
  text-transform:uppercase;
  /*box-shadow: inset 0 0 0 0 gold;*/
  cursor:pointer;
  position: relative;
}
div.nav ul li a:before {
  content: '';
  position: absolute;
  z-index: -1;
  background: gold;
  top: 0;
  left: 0;
  right: 100%;
  bottom: 0;
  -webkit-transition: .5s ease-in;
  -moz-transition: .5s ease-in;
  transition: .5s ease-in;
  
}
div.nav ul li a:hover:before {
  right: 0;
  -webkit-transition: .5s ease-out;
  -moz-transition: .5s ease-out;
  transition: .5s ease-out;
}
div.nav ul li a i {
  display:block;
  margin-bottom:5px;
}

<div class="nav">
       <ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
   </div>

Answer 3

    div.nav {float:left;}
    div.nav ul{list-style-type: none;
               margin: 0;
               padding: 0;
               width: 180px;}
    div.nav ul li{border:1px solid #EAEAEA;}
    div.nav ul li a {display:inline-block;
                     position:relative;
                     z-index:2;
                     color: black;
                     width:180px;
                     margin:0 auto;
                     padding:50px 0;
                     text-decoration: none;
                     text-align:center;
                     text-transform:uppercase;
    		         -webkit-transition: ease 1s;
                     -moz-transition: all ease 1s;
                     transition: all ease 1s;
    		         cursor:pointer;}

    div.nav ul li a:after{ 
                     content:"";
                     z-index:-1;
                     width: 0%;
                     height: 100%;
	                   background-color: gold;
                     position: absolute;
                     top:0;
                     left:0;
                     right:0;
                     bottom:0;
                     transition: all .5s ease-out;
                     }
		   
    div.nav ul li a:hover:after{ width:100%;}

 <div class="nav">
       <ul>
	     <li><a href="#"> <i class="fa fa-user"></i>About Me</a></li>
		 <li><a href="#"><i class="fa fa-briefcase"></i>Resume</a></li>
		 <li><a href="#"><i class="fa fa-camera"></i>Portfolio</a></li>
		 <li><a href="#"><i class="fa fa-phone"></i>Contact</a></li>
	   </ul>
   </div>

попробуйте с этим .. просто используя: before вместо box-shadow