CSS animation not working in the menu button

Question

Here is the code of my javascript.

function change(x) {
      if(!document.querySelector(".animate")){
      x.classList.add("animate");
      x.classList.remove("animater");
      }else{
      x.classList.remove("animate");
      x.classList.add("animater");
    }

Now the first time animation works but when i click it more than once it just shows the end state without animation. Animater contains three classes all working and so does animater.The div also passes the information correctly to function.

Here is the full code:

function change(x) {
  if (!document.querySelector(".animate")) {
    x.classList.add("animate");
    x.classList.remove("animater");
  } else {
    x.classList.remove("animate");
    x.classList.add("animater");
  }
}

body {
  background: #3FAF82;
  text-align: center;
}

.line1,
.line2,
.line3 {
  margin: 0px auto;
  margin-top: 10px;
  height: 5px;
  width: 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  transition: all ease 0.8s;
}

.lines {
  margin-top: 50px;
  cursor: pointer;
}

.animate .line3 {
  animation: change3 ease 1 0.8s forwards;
}

.animater .line3 {
  animation: change3 ease 1 0.8s forwards reverse;
}

.animate .line1 {
  animation: change1 ease 1 0.8s forwards;
}

.animater .line1 {
  animation: change1 ease 1 0.8s reverse forwards;
}

.animate .line2 {
  width: 0px;
}

.animater .line2 {
  width: 80px;
}

@keyframes change3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -15px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0, -15px, 0) rotate(-45deg);
  }
}

@keyframes change1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(0);
    transform: translate3d(0, 15px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(45deg);
    transform: translate3d(0, 15px, 0) rotate(45deg);
  }
}


}

<div class="lines" onclick="change(this)">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

Answer 1

The issue here is that you are using the same animation so by adding removing classes you don't change the animation, you simply change some properties of it so the animation won't run again.

To avoid this use 2 different animation.

function change(x) {
  if (!document.querySelector(".animate")) {
    x.classList.remove("animater");
    x.classList.add("animate");
  } else {
    x.classList.remove("animate");
    x.classList.add("animater");
  }
}

body {
  background: #3FAF82;
  text-align: center;
}

.line1,
.line2,
.line3 {
  margin: 0px auto;
  margin-top: 10px;
  height: 5px;
  width: 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  transition: all ease 0.8s;
}

.lines {
  margin-top: 50px;
  cursor: pointer;
}

.animate .line3 {
  animation: change3 ease 1 0.8s forwards;
}

.animater .line3 {
  animation: change3_rev ease 1 0.8s forwards;
}

.animate .line1 {
  animation: change1 ease 1 0.8s forwards;
}

.animater .line1 {
  animation: change1_rev ease 1 0.8s forwards;
}

.animate .line2 {
  width: 0px;
}

.animater .line2 {
  width: 80px;
}

@keyframes change3 {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -15px, 0) rotate(0deg);
  }
  100% {
    transform: translate3d(0, -15px, 0) rotate(-45deg);
  }
}
@keyframes change3_rev {
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    transform: translate3d(0, -15px, 0) rotate(0deg);
  }
  0% {
    transform: translate3d(0, -15px, 0) rotate(-45deg);
  }
}

@keyframes change1 {
  0% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(0);
    transform: translate3d(0, 15px, 0) rotate(0);
  }
  100% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(45deg);
    transform: translate3d(0, 15px, 0) rotate(45deg);
  }
}
@keyframes change1_rev {
  100% {
    -webkit-transform: translate3d(0, 0, 0) rotate(0deg);
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  50% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(0);
    transform: translate3d(0, 15px, 0) rotate(0);
  }
  0% {
    -webkit-transform: translate3d(0, 15px, 0) rotate(45deg);
    transform: translate3d(0, 15px, 0) rotate(45deg);
  }
}


}

<div class="lines" onclick="change(this)">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>

By the way you can simplify this by using only transition:

function change(x) {
  x.classList.toggle("animate");
}

body {
  background: #3FAF82;
  text-align: center;
}

.line1,
.line2,
.line3 {
  position: relative;
  margin: 0px auto;
  margin-top: 10px;
  height: 5px;
  width: 80px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.3);
  transition: width linear 0.8s, top 0.5s linear 0.5s, bottom 0.5s linear 0.5s, transform 0.5s linear;
}

.line1 {
  top: 0;
}

.line3 {
  bottom: 0;
}

.lines {
  margin-top: 50px;
  cursor: pointer;
}

.animate .line1,
.animate .line2,
.animate .line3 {
  transition: width linear 0.8s, top 0.5s linear, bottom 0.5s linear, transform 0.5s linear 0.5s;
}

.animate .line3 {
  bottom: 15px;
  transform: rotate(-45deg);
}

.animate .line1 {
  top: 15px;
  transform: rotate(45deg);
}

.animate .line2 {
  width: 0px;
}

.animater .line2 {
  width: 80px;
}

<div class="lines" onclick="change(this)">
  <div class="line1"></div>
  <div class="line2"></div>
  <div class="line3"></div>
</div>