在汉堡菜单

Question

我有3个跨度的汉堡菜单。我想在点击时运行我的动画并在再次点击时将其反转。现在，当您单击时，顶部和底部跨度为动画，然后您再次单击它们应该反转。我试了好几个小时但是无法得到它所以我制作了2个单独的前进动画和2个单独的反向动画。

有人能告诉我如何避免在这上面制作所有这些动画吗？

请看我的笔：here

    $(document).on('click', '#hamburger.unopened', function() {
    $('#hamburger .nav-icon span:nth-of-type(1)').addClass("hamforward__top");
    $('#hamburger .nav-icon span:nth-of-type(3)').addClass("hamforward__btm");
    $('#hamburger').toggleClass('unopened opened');
    $('body').toggleClass('menuopen');
    });
                
    $(document).on('click', '#hamburger.opened', function() {
    $('#hamburger .nav-icon span:nth-of-type(1)').toggleClass("hamforward__top hamreverse__top");
    $('#hamburger .nav-icon span:nth-of-type(3)').toggleClass("hamforward__btm hamreverse__btm");
    $('body').toggleClass('menuopen');
    });

     #hamburger {
     width:30px;
     position: absolute;
     top: 40px;
     left: 40px;
     cursor: pointer;
     }
     #hamburger .nav-icon {
     position: relative;
     display: block;
     z-index: 30;
     width: 35px;
     visibility: visible;
     opacity: 1;
     height:30px;
     width:100%;
     }
     #hamburger .nav-icon span {
     width: 100%;
     height: 2px;
     width: 100%;
     left: 0;
     background: #fff;
     display: block;
     position: absolute;
     background-color:black;
     }  
     #hamburger .nav-icon span:nth-of-type(1) {
     top: 0;
     }
     #hamburger .nav-icon span:nth-of-type(2) {
     top: 9px;
     opacity:1;
     }
     #hamburger .nav-icon span:nth-of-type(3) {
     top: 18px;
     }
     .menuopen #hamburger .nav-icon span:nth-of-type(2) {
      opacity:0;
     }
     .menuopen #hamburger .nav-icon span:nth-of-type(2) {
     transition: all 0.4s;
     transition-delay: 0.2s;
     }
     #hamburger .nav-icon span:nth-of-type(2) {
     transition: all 0.4s;
     transition-delay: 0.2s;
     }
     .hamforward__top  {
     -webkit-animation: downuphamburger; 
     -moz-animation: downuphamburger; 
     -o-animation: downuphamburger; 
      animation:downuphamburger;
     }
     .hamreverse__top	 {
     -webkit-animation: downuphamburger__reverse; 
     -moz-animation: downuphamburger__reverse; 
     -o-animation: downuphamburger__reverse; 
      animation:downuphamburger__reverse;
     }
        
    .hamforward__btm  {
    -webkit-animation: updownhamburger; 
    -moz-animation: updownhamburger; 
    -o-animation: updownhamburger; 
    animation:updownhamburger;
    }
    .hamreverse__btm	 {
    -webkit-animation: updownhamburger__reverse; 
    -moz-animation: updownhamburger__reverse; 
    -o-animation: updownhamburger__reverse; 
    animation:updownhamburger__reverse;
    }
   
   .hamforward__top,
   .hamreverse__top,
   .hamforward__btm,
   .hamreverse__btm  {
   animation-fill-mode: both;
   -webkit-animation-fill-mode: both;
   }
   .hamforward__top,
   .hamreverse__top,
   .hamforward__btm,
   .hamreverse__btm   {
   -webkit-animation-timing-function: ease-in-out; /* Safari 4.0 - 8.0 */
   animation-timing-function: ease-in-out;
   }
   .hamforward__top,
   .hamreverse__top,
   .hamforward__btm,
   .hamreverse__btm {
   -webkit-animation-duration: 0.7s; 
   animation-duration:0.7s;
   }
   .x {
   -webkit-animation-delay: .1s; 
   animation-delay:  .1s;
   }

   @keyframes downuphamburger {
   0% {
    top:-5px;
   }
   50% {
    top:11px;
    transform: rotate(0deg);
   }
   100% {
  	top:11px;
    transform: rotate(132deg);
    }
   }
             
   @keyframes downuphamburger__reverse {
   0% {
   top:11px;
   transform: rotate(132deg);
   }
   50% {
     top:11px;
     transform: rotate(0deg);
   }
   100% {
   	top:0px;
    }
   }
 
   @keyframes updownhamburger {
   0% {
     top:23px;
   }
   50% {
     top:11px;
     transform: rotate(0deg);
   }
   100% {
   	top:11px;
     transform: rotate(50deg);
     }
   }
   @keyframes updownhamburger__reverse {
   0% {
     top:11px;
     transform: rotate(50deg);
   }
   50% {
     top:11px;
     transform: rotate(0deg);
   }
   100% {
   	
     top:18px;
    }
   }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <!-- start hamburger -->
     <div id="hamburger" class="unopened">
            <div class="nav-icon">
              <span></span>
              <span></span>
              <span></span>
            </div>
      </div>
 <!-- end hamburger -->