Trying to bring life to a menu icon through CSS transformations on pseudo-elements :before and :after attached to a span.
Everything goes smoothly when the menu icon transitions into its active state, but upon returning to default, the middle bar of the icon reappears abruptly between the other two bars. These extra pixels disrupt the positioning of the bars before the rotation transition, resulting in an awkward animation.
Any ideas on how to solve this issue?
Code snippet:
document.querySelector("#nav-toggle").addEventListener("click", function() {
this.classList.toggle("active");
});#nav-toggle {
display: block;
width: 80px;
padding: 0px 15px;
line-height: 61px;
color: #fff;
background-color: #333;
text-align: right;
}
#nav-toggle span {
top: 36px;
}
#nav-toggle span,
#nav-toggle span:before,
#nav-toggle span:after {
cursor: pointer;
border-radius: 1px;
height: 4px;
width: 25px;
background: white;
position: absolute;
display: block;
content: '';
transition: all 500ms ease-in-out;
}
#nav-toggle span:before {
top: -8px;
}
#nav-toggle span:after {
top: 8px;
}
#nav-toggle.active span {
background-color: transparent;
top: 36px;
}
#nav-toggle.active span:before,
#nav-toggle.active span:after {
top: 0px;
}
#nav-toggle.active span:before {
-webkit-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#nav-toggle.active span:after {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}<body>
<div>
<a href="#" id="nav-toggle"><span></span>MENU</a>
</div>
</body>