While creating a CSS animation for a responsive menu icon that transforms into an "X" when clicked, I encountered a minor glitch. The top line of the menu icon flickers down by about 1px after the X shape is formed, causing it to continue moving while the other lines have stopped. Despite spending hours trying to fix this issue, I haven't been successful. Is there a solution to prevent this from happening, or perhaps a better approach to achieving the desired 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');
});
});