<div class="container">

  <!--  Close Button -->

  <div class="row">
    
    <div class="col-xs-12">
      <h1>Hamburger Icon <br /> <span>Animations</span></h1>
    </div>
    
    <div class="col-xs-6 col-sm-2">
      
      <!--  Close Button 1 -->
      
      <div class="menu menu--close1">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>

    </div>
    <div class="col-xs-6 col-sm-2">
      
      <!--  Close Button 2 -->
      
      <div class="menu menu--close2">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>

    </div>
    <div class="col-xs-6 col-sm-2">
      
      <!--  Close Button 3 -->
      
      <div class="menu menu--close3">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>
      
    </div>
    <div class="col-xs-6 col-sm-2">
      
      <!--  Close Button 4 -->
      
      <div class="menu menu--close4">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>
      
    </div>
    <div class="col-xs-6 col-sm-2">
      
      <!--  Close Button 5 -->
      
      <div class="menu menu--close5">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
          <div class="menu__line menu__line--4"></div>
          <div class="menu__line menu__line--5"></div>
        </div>
      </div>
    
    </div>
    <div class="col-xs-6 col-sm-2">
    
      <div class="menu menu--close6">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>
    
    </div>
  </div>

  <!--  Back Arrow  -->

  <div class="row">
    <div class="col-xs-6 col-sm-2">
      
      <!--  Back Arrow 1 -->
      
      <div class="menu menu--back1">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>

    </div>
    <div class="col-xs-6 col-sm-2">
      
      <!--  Back Arrow 2 -->
      
      <div class="menu menu--back2">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>

    </div>
    <div class="col-xs-6 col-sm-2">
      
      <!--  Back Arrow 3 -->
      
      <div class="menu menu--back3">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>
      
    </div>
    <div class="col-xs-6 col-sm-2">
      
      <!--  Back Arrow 4 -->
      
      <div class="menu menu--back4">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>
    
    </div>
    <div class="col-xs-6 col-sm-2">
      
      <!--  Back Arrow 5 -->
      
      <div class="menu menu--back5">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>
    
    </div>
    <div class="col-xs-6 col-sm-2">
    
      <div class="menu menu--back6">
        <div class="menu__icon">
          <div class="menu__line menu__line--1"></div>
          <div class="menu__line menu__line--2"></div>
          <div class="menu__line menu__line--3"></div>
        </div>
      </div>
      
    </div>
  </div>
</div>

$size: 60px;
$height: 20px;
$width: 30px;
$line-size: 3px;
$line-color: #47C9AF;
$line-radius: $line-size;
$to-translate: ($height - $line-size) / 2;
$bounce: cubic-bezier(.87,-.50,.19,1.50);

body {
  background: #47C9AF;
}

.container {
  padding: 50px 0 50px;
}

h1 {
  font-family: 'Merriweather';
  color: #FFFCE6;
  font-weight: 500;
  font-size: 90px;
  text-align: center;
  line-height: .9;
  margin-bottom: 50px;
  
  span {
    font-family: 'Raleway';
    font-weight: 200;
    font-size: 70px;
  }
}

.menu {
  position: relative;
  height: $size;
  width: $size;
  background-color: #FFFCE6;
  cursor: pointer;
  margin: 50px auto;
  overflow: hidden;
  
  &__icon {
    position: absolute;
    width: $width;
    height: $height;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  &__line {
    position: absolute;
    left: 0;
    background-color: $line-color;
    height: $line-size;
    width: 100%;
    border-radius: $line-radius;
    pointer-events: none;
    &--1 {
      top: 0;
    }
    &--2 {
      top: 0;
      bottom: 0;
      margin: auto;
    }
    &--3 {
      bottom: 0;
    }
  }
  
  /*--- Close Button 1 ---*/
  
  &--close1 &__line--1 {
    transition: transform .2s ease-in-out;
  }
  &--close1 &__line--2 {
    right: 0;
    transition: right .2s ease-in-out, 
      opacity .35s ease-in-out, 
      transform 0s ease-in-out;
  }
  &--close1 &__line--3 {
    transition: transform .2s ease-in-out;
  }
  // Open
  &--close1.open &__line--1 {
    transform: translate3d(0, $to-translate, 0) rotate(135deg);
  }
  &--close1.open &__line--2 {
    opacity: 0;
    right: -$width*4;
    transform: translate3d(-$width, 0, 0);
    transition: opacity .2s ease-in-out, 
      transform .2s ease-in-out, 
      right .0s ease-in-out .2s;
  }
  &--close1.open &__line--3 {
    transform: translate3d(0, -$to-translate, 0) rotate(-135deg);
  }
  
  /*--- Close Button 2 ---*/
  
  &--close2 &__line--1 {
    transition: transform .3s ease-in-out, 
      top .2s ease-in-out .3s;
  }
  &--close2 &__line--1:before {
    content: '';
    position: absolute;
    width: 100%;
    height: $line-size;
    background-color: $line-color;
    border-radius: $line-radius;
    transition: transform .1s ease-in-out .2s;
  }
  &--close2 &__line--2 {
    transition: opacity .0s ease-in-out .3s;
  }
  &--close2 &__line--3 {
    transition: opacity .0s ease-in-out .3s, 
      bottom .2s ease-in-out .3s;
  }
  // Open
  &--close2.open &__line--1 {
    top: $to-translate;
    transform: rotate(135deg);
    transition: top .3s ease-in-out, 
      transform .3s linear .3s;
  }
  &--close2.open &__line--1:before {
    transform: rotate(90deg);
    transition: transform .1s ease-in-out .3s;
  }
  &--close2.open &__line--2 {
    opacity: 0;
    transition: opacity .0s ease-in-out .3s;
  }
  &--close2.open &__line--3 {
    bottom: $to-translate;
    opacity: 0;
    transition: bottom .3s ease-in-out, 
      opacity .0s ease-in-out .3s;
  }
  
  /*--- Close Button 3 ---*/
  
  &--close3 &__line--1 {
    transition: transform .2s ease-in-out .15s, 
      top .2s ease-in-out .2s;
  }
  &--close3 &__line--1:before {
    content: '';
    position: absolute;
    width: 100%;
    height: $line-size;
    background-color: $line-color;
    border-radius: $line-radius;
    transition: transform .15s ease-in-out;
  }
  &--close3 &__line--2{
    transition: opacity .0s ease-in-out .35s;
  }
  &--close3 &__line--3 {
    transition: opacity .0s ease-in-out .25s;
  }
  // Open
  &--close3.open &__line--1 {
    top: $to-translate*2;
    transform: translate3d(0,-$to-translate,0) rotate(-45deg);
    transition: top .2s ease-in-out, 
      transform .15s ease-in-out .2s;
  }
  &--close3.open &__line--1:before {
    transform: rotate(-90deg);
    transition: transform .15s ease-in-out .3s;
  }
  &--close3.open &__line--2{
    opacity: 0;
    transition: opacity .0s ease-in-out .1s;
  }
  &--close3.open &__line--3{
    opacity: 0;
    transition: opacity .0s ease-in-out .2s;
  }
  
  /*--- Close Button 4 ---*/
  
  &--close4 &__line--1,
  &--close4 &__line--3{
    transition: all .2s ease-in-out;
  }
  &--close4 &__line--2{
    transition: transform .2s ease-in-out;
  }
  &--close4 &__line--2:before {
    content: '';
    position: absolute;
    width: 100%;
    height: $line-size;
    background-color: $line-color;
    border-radius: $line-radius;
    transition: transform .2s ease-in-out;
  }
  // Open
  &--close4.open &__line--1 {
    opacity: 0;
    transform: translate3d(-2*$to-translate,0,0);
    transition: all .2s ease-in-out;
  }
  &--close4.open &__line--2{
    transform: rotate(45deg);
    transition: transform .2s ease-in-out;
  }
  &--close4.open &__line--2:before {
    transform: rotate(-90deg);
    transition: transform .2s ease-in-out;
  }
  &--close4.open &__line--3{
    opacity: 0;
    transform: translate3d(2*$to-translate,0,0);
    transition: all .2s ease-in-out;
  }
  
  /*--- Close Button 5 ---*/
  
  &--close5 &__line--4,
  &--close5 &__line--5 {
    opacity: 0;
    top: $to-translate;
    transition: opacity .2s ease-in-out,
                transform .2s ease-in-out;
  }  
  &--close5 &__line--1 {
    transition: width .2s ease-in-out .4s;
  }
  &--close5 &__line--2 {
    transition: width .2s ease-in-out .3s;
  }
  &--close5 &__line--3 {
    transition: width .2s ease-in-out .2s;
  }
  &--close5 &__line--4 { 
    transform: rotate(45deg) translate3d(-$width,0,0); 
    transition: opacity .2s ease-in-out .2s, 
      transform .2s ease-in-out .2s;
  }
  &--close5 &__line--5 { 
    transform:  rotate(-45deg) translate3d($width,0,0); 
    transition: opacity .2s ease-in-out,
                transform .2s ease-in-out;
  }
  // Open
  &--close5.open &__line--1 {
    width: 0;
    transition: width .2s ease-in-out;
  }
  &--close5.open &__line--2 {
    width: 0;
    transition: width .2s ease-in-out .1s;
  }
  &--close5.open &__line--3 {
    width: 0;
    transition: width .2s ease-in-out .2s;
  }
  &--close5.open &__line--4 { 
    opacity: 1;
    transform: rotate(45deg) translate3d(0,0,0); 
    transition: opacity .2s ease-in-out .2s,
                transform .2s ease-in-out .2s;
  }
  &--close5.open &__line--5 { 
    opacity: 1;
    transform:  rotate(-45deg) translate3d(0,0,0); 
    transition: opacity .2s ease-in-out .4s,
                transform .2s ease-in-out .4s;
  }
  
  /*--- Close Button 6 ---*/
  
  &--close6 &__icon {
    transition: transform 0s ease-in-out;
  }
  &--close6 &__line--1 {
    transition: transform .2s ease-in-out .3s,
      opacity 0s ease-in-out .4s;
  }
  &--close6 &__line--2{
    transition: transform .2s ease-in-out;
  }
  &--close6 &__line--2:before {
    content: '';
    position: absolute;
    width: 100%;
    height: $line-size;
    background-color: $line-color;
    border-radius: $line-radius;
    transition: transform .2s ease-in-out;
  }
  &--close6 &__line--3 {
    transition: transform .2s ease-in-out .3s,
      opacity 0s ease-in-out .4s;
  }
  // Open
  &--close6.open &__icon {
    transform: translate(-50%,-50%) rotate(90deg);
    transition: transform .2s ease-in-out;
  }
  &--close6.open &__line--1 {
    opacity: 0;
    transform: translate3d(0,$to-translate,0);
    transition: transform .2s ease-in-out .2s,
      opacity 0s ease-in-out .4s;
  }
  &--close6.open &__line--2{
    transform: rotate(45deg);
    transition: transform .2s ease-in-out .5s;
  }
  &--close6.open &__line--2:before {
    transform: rotate(-90deg);
    transition: transform .2s ease-in-out .5s;
  }
  &--close6.open &__line--3{
    opacity: 0;
    transform: translate3d(0,-$to-translate,0);
    transition: transform .2s ease-in-out .2s,
      opacity 0s ease-in-out .4s;
  }
  
  /*--- Back Arrow 1 ---*/
  
  &--back1 &__line--1,
  &--back1 &__line--3 {
    transition: transform .3s ease-in-out;
  }
  // Open
  &--back1.open &__line--1 {
    transform: translate3d(-6.5px, 1px, 0) rotate(135deg) scaleX(.7);
    transition: transform .3s ease-in-out;
  }
  &--back1.open &__line--3 {
    transform: translate3d(-6.5px, -1px, 0) rotate(-135deg) scaleX(.7);
    transition: transform .3s ease-in-out;
  }
  
  /*--- Back Arrow 2 ---*/
  
  &--back2 &__line--1,
  &--back2 &__line--3 {
    transition: transform .3s ease-in-out;
  }
  // Open
  &--back2.open &__line--1 {
    transform: translate3d(-6.5px, 1px, 0) rotate(-225deg) scaleX(.7);
    transition: transform .3s ease-in-out;
  }
  &--back2.open &__line--3 {
    transform: translate3d(-6.5px, -1px, 0) rotate(225deg) scaleX(.7);
    transition: transform .3s ease-in-out;
  }
  
  /*--- Back Arrow 3 ---*/
  
  &--back3 &__line--1 {
    transition: transform .2s ease-in-out .2s;
  }
  &--back3 &__line--2 {
    transition: transform .2s ease-in-out .1s;
  }
  &--back3 &__line--3 {
    transition: transform .2s ease-in-out;
  }
  // Open
  &--back3.open &__line--1 {
    transform: translate3d(-6.5px, 1px, 0) rotate(135deg) scaleX(.7);
    transition: transform .2s ease-in-out;
  }
  &--back3.open &__line--2 {
    transform: rotate(180deg);
    transition: transform .2s ease-in-out .1s;
  }
  &--back3.open &__line--3 {
    transform: translate3d(-6.5px, -1px, 0) rotate(225deg) scaleX(.7);
    transition: transform .2s ease-in-out .2s;
  }
  
  /*--- Back Arrow 4 ---*/
  
  &--back4 &__line--1 {
    transition: transform .3s ease-in-out;
  }
  &--back4 &__line--2 {
    transition: transform .3s ease-in-out;
  }
  &--back4 &__line--3 {
    transition: transform .3s ease-in-out;
  }
  // Open
  &--back4.open &__line--1 {
    transform: translate3d(-6.5px, 16px, 0) rotate(-135deg) scaleX(.7);
    transition: transform .3s ease-in-out;
  }
  &--back4.open &__line--2 {
    transform: rotate(-180deg);
    transition: transform .3s ease-in-out;
  }
  &--back4.open &__line--3 {
    transform: translate3d(-6.5px, -16px, 0) rotate(-225deg) scaleX(.7);
    transition: transform .3s ease-in-out;
  }
  
  /*--- Back Arrow 5 ---*/
  
  &--back5 &__icon {
    transition: transform .3s ease-in-out;
  }
  &--back5 &__line--1,
  &--back5 &__line--3 {
    transition: transform .3s ease-in-out;
  }
  // Open
  &--back5.open &__icon {
    transform: rotate(180deg) translate(50%, 50%);
    transition: transform .3s ease-in-out;
  }
  &--back5.open &__line--1 {
    transform: translate3d(6.5px, 1px, 0) rotate(45deg) scaleX(.7);
    transition: transform .3s ease-in-out;
  }
  &--back5.open &__line--3 {
    transform: translate3d(6.5px, -1px, 0) rotate(-45deg) scaleX(.7);
    transition: transform .3s ease-in-out;
  }
  
  /*--- Back Arrow 6 ---*/
  
  &--back6 &__line--1 {
    transition: transform .3s ease-in-out,
      top .2s ease-in-out .3s;
  }
  &--back6 &__line--3 {
    transition: transform .3s ease-in-out,
      bottom .2s ease-in-out .3s;;
  }
  // Open
  &--back6.open &__line--1 {
    top: $to-translate;
    transform: translate3d(-6.5px, -7.5px, 0) rotate(-45deg) scaleX(.7);
    transition: top .2s ease-in-out, 
      transform .3s ease-in-out .2s;
  }
  &--back6.open &__line--3 {
    bottom: $to-translate;
    transform: translate3d(-6.5px, 8px, 0) rotate(45deg) scaleX(.7);
    transition: bottom .2s ease-in-out, 
      transform .3s ease-in-out .2s;
  }
}

$('body').on('click', '.menu', function(){
  $(this).toggleClass('open');
});