$(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>