I have followed the instructions and even tried copy and pasting. (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_menu_icon_js), however the animation doesn't play out fully? the bars don't become the X and instead they reset halfway through the animation.
Any idea what might be causing this? I have included the code below.
function myFunction(x) {
x.classList.toggle("change");
} .menu-container {
display: inline-block;
cursor: pointer;
}
.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #fff;
margin: 6px 0;
transition: 0.4s;
}
.change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}
.change .bar2 {opacity: 0;}
.change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}HTML<div class="menu-container" onClick="myFunction(this)"><div class="bar1"></div><div class="bar2"></div><div class="bar3"></div></div>