Change hamburger icon

Question

I'm trying to change my hamburger icon to go to X. What i want to create is the top and bottom lines to go to the middle and then to go X. This is my code so far:

$(document).ready(function() {
  $(".icon").click(function() {
    $(".icon").toggleClass("active");
  });
});

body {
  margin: 0;
  padding: 0;
  background: #ff5c40;
}

.icon {
  position: absolute;
  top: 50%;
  Left: 50%;
  transform: transition(-50%, -50%);
  width: 80px;
  height: 80px;
}

.hamburger {
  width: 50px;
  height: 6px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:after {
  top: 16px;
}

.hamburger:before {
  top: -16px;
}

.icon.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.icon.active .hamburger:before {
   top: 0px;
     -webkit-transform: rotate(-135deg) ;
     transform:  rotate(-135deg);
     -webkit-transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
     transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
     transition: top .2s ease-in-out,  transform .3s ease-in-out .2s;
     transition: top .2s ease-in-out,  transform .3s ease-in-out .2s,  -webkit-transform .3s ease-in-out .2s;
}



.icon.active .hamburger:after {
  top: 0px;
      -webkit-transform: rotate(-45deg) ;
      transform: rotate(-45deg);
      transition: top .2s ease-in-out,  -webkit-transform .3s ease-in-out .2s;
      transition: top .2s ease-in-out,  transform .3s ease-in-out .2s;
      transition: top .2s ease-in-out,  transform .3s ease-in-out .2s,  -webkit-transform .3s ease-in-out .2s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="icon">
  <div class="hamburger">
  </div>
</div>

I really appreciate it if anyone would help me. Since I've been stuck in this for so long, it have been three or four days now. and i don't know what else to do!!

Answer 1

How about rotating your other line -45 deg?

EDIT: updated per your request via comments. This now uses keyframes. We say at 0% of the total time do nothing, then at 50% of the total time (1second of 2 total) bring the top and bottom line together in the middle. Then at 100% of total time(at 2seconds)rotate our lines to make a X. You could also look into chaining animations but i find it kind of unreliable. this solution, takes your work and splits it into what you want to happen The forwards will keep the last frame of the animation, giving you the X look rather than repeating the animation over and over.

$(document).ready(function() {
  $(".icon").click(function() {
    $(".icon").toggleClass("active");
  });
});

body {
  margin: 0;
  padding: 0;
  background: #ff5c40;
}

.icon {
  position: absolute;
  top: 50%;
  Left: 50%;
  transform: transition(-50%, -50%);
  width: 80px;
  height: 80px;
}

.hamburger {
  width: 50px;
  height: 6px;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:before,
.hamburger:after {
  content: "";
  position: absolute;
  width: 50px;
  height: 6px;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
  transition: .5s;
}

.hamburger:after {
  top: 16px;
}

.hamburger:before {
  top: -16px;
}

.icon.active .hamburger {
  background: rgba(0, 0, 0, 0);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0);
}

.icon.active .hamburger:before {
  animation: makeXLeft 2s forwards;
}

.icon.active .hamburger:after {
    animation: makeXRight 2s forwards;
}

/* Standard syntax */
@keyframes makeXLeft {
  0% {}
  50% {top: 0px;transform: rotate(0deg);}
  100% {top: 0px;transform: rotate(45deg);}
}

/* Standard syntax */
@keyframes makeXRight {
  0% {}
  50% {top: 0px;transform: rotate(0deg);}
  100% {top: 0px;transform: rotate(-45deg);}
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="icon">
  <div class="hamburger">
  </div>
</div>