Animated after element has delay and twitching

Question

I am trying to set behaviour for menu items in the header like here: http://www.germanamericanconference.org/partners/. There is a bar which slides back and forth when hovering on elements. In my case I can't add another element to my header and such effect should be purely CSS so instead I am using after pseudo-element.

Here, in the example: https://jsfiddle.net/1czmx08y/

As you can see there is a delay when moving between items but even if I decrease transition time, it starts twitching.

How can I avoid such behaviour? I feel like my transition is wrong.

Answer 1

Change all the transitions to 0.15s or 0.18s; Isn't much better now? i think it would be better and it could be a better choice than using a plugin or more css or any js.

html {
  font-family: 'Josefin Slab', 'Comfortaa', sans-serif;
  font-size: 1.2em;
  background: #eee;
}

ul {
  position: relative;
  width: 27em;
  height: 2em;
  margin: 100px auto;
  padding: 0;
  white-space: nowrap;
}

ul li {
  display: inline;
  text-align: center;
}

ul li a {
  position: relative;
  top: 0;
  left: 0;
  right: 25em;
  bottom: 0;
  display: inline-block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .4em .2em;
  color: #09C;
  text-decoration: none;
  text-shadow: 0 1px 0 white;

  /*transition*/
  -webkit-transition: width .3s,right .3s;
  -moz-transition: width .3s,right .3s;
  -o-transition: width .3s,right .3s;
  transition: width .19s,right .19s;
}

ul li:nth-child(1) a { width: 2em; }
ul li:nth-child(2) a { width: 4em; }
ul li:nth-child(3) a { width: 4em; }
ul li:nth-child(4) a { width: 12em; }
ul li:nth-child(5) a { width: 5em; }

ul li:last-child a::after {
  content: "";
  position: absolute;
  right: inherit;
  bottom: -3px;
  width: inherit;
  height: 3px;
  background: #ccc;
  pointer-events: none;
  /*transition*/
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .19s ease;
}

ul li:nth-child(1) ~ li:last-child a {
  right: 25em;
  width: 2em;
}

ul li:nth-child(2):hover ~ li:last-child a {
  right: 21em;
  width: 4em;
}

ul li:nth-child(3):hover ~ li:last-child a {
  right: 17em;
  width: 4em;
}

ul li:nth-child(4):hover ~ li:last-child a {
  right: 5em;
  width: 12em;
}

ul li:nth-child(5):last-child:hover a {
  right: 0;
  width: 5em;
}

ul li:hover ~ li:last-child a::after,
ul li:last-child:hover a::after { background: #c351fa; }

ul li:last-child a {
  min-width: 5em;
  max-width: 5em;
}

ul li a:hover,
ul li a:focus {
  color: #c351fa;
  background-color: rgba(255,255,255,.6);

  /*transition*/
  -webkit-transition: width .3s,right .3s,background-color .3s;
  -moz-transition: width .3s,right .3s,background-color .3s;
  -o-transition: width .3s,right .3s,background-color .3s;
  transition: width .19s,right .19s,background-color .19s;
}

ul li a:focus { border-bottom: 3px solid #c351fa; }

<ul>
   <li><a href="#"> &#10047; </a></li><!--
--><li><a href="#"> Lorem </a></li><!--
--><li><a href="#"> Ipsum </a></li><!--
--><li><a href="#"> Consectetur adipisicing </a></li><!--
--><li><a href="#"> Sit amet </a></li>
 </ul>