Animated after element has delay and twitching - css

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> ✿ </li><!--
--><li> Lorem </li><!--
--><li> Ipsum </li><!--
--><li> Consectetur adipisicing </li><!--
--><li> Sit amet </li>
</ul>