Slight glitch in CSS animation - css

Question

There's a very small glitch in a CSS animation I've made for a responsive menu icon that turns into an "X" when clicked. The top line of the menu icon flickers down about 1px once the X shape has been made, so it is effectively still moving once the others have stopped. I've been messing around with it for hours but haven't been able to stop it happening – can anyone think of a way in which I could do this, or even a better way of achieving that animation?
https://jsfiddle.net/8nj5y4t1/58/
HTML:
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>
CSS:
.menu-button {
position: relative;
top: 0;
right: 0;
display: inline-block;
z-index: 10;
width: 21px;
height: 14px;
padding: 2px 0 2px 0;
cursor: pointer;
vertical-align: middle;
}
.bar {
display: block;
position: absolute;
width: 21px;
height: 2px;
background-color:#888;
-webkit-transition: all .8s;
transition: all .8s;
}
.bar:nth-child(3n) {
top: 2px;
}
.bar:nth-child(3n+1) {
top: 8px;
opacity:1;
}
.bar:nth-child(3n+2) {
top: 14px;
}
.bar.open {
background-color:#666;
}
.bar:nth-child(3n).open {
transform: rotate(45deg);
width: 23px;
left: -1px;
top: 7.5px;
}
.bar:nth-child(3n+1).open {
opacity:0;
}
.bar:nth-child(3n+2).open {
transform: rotate(-45deg);
width: 23px;
left: -1px;
top: 7.5px;
}
jQuery:
jQuery(document).ready(function($) {
$('.menu-button').click(function() {
$('.bar').toggleClass('open');
});
});

Answer 1

.bar:nth-child(3n+1) top property and .bar:nth-child(3n).open and .bar:nth-child(3n+2).open top properties should be off same value;
Example
I replaced top:7.5px with top:8px at .bar:nth-child(3n).open and .bar:nth-child(3n+2).open
jQuery(document).ready(function($) {
$('.menu-button').click(function() {
$('.bar').toggleClass('open');
});
});
.menu-button {
position: relative;
top: 0;
right: 0;
display: inline-block;
z-index: 10;
width: 21px;
height: 14px;
padding: 2px 0 2px 0;
cursor: pointer;
vertical-align: middle;
}
.bar {
display: block;
position: absolute;
width: 21px;
height: 2px;
background-color:#888;
-webkit-transition: all .8s;
transition: all .8s;
}
.bar:nth-child(3n) {
top: 2px;
}
.bar:nth-child(3n+1) {
top: 8px;
opacity:1;
}
.bar:nth-child(3n+2) {
top: 14px;
}
.bar.open {
background-color:#666;
}
.bar:nth-child(3n).open {
transform: rotate(45deg);
width: 23px;
left: -1px;
top: 8px; /* Changed this from 7.5px to 8px */
}
.bar:nth-child(3n+1).open {
opacity:0;
}
.bar:nth-child(3n+2).open {
transform: rotate(-45deg);
width: 23px;
left: -1px;
top: 8px; /* Changed this from 7.5px to 8px */
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="menu-button">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</span>