<div class="burger-1">
  <span></span>
</div>

<div class="burger-2">
  <span></span>
</div>

<div class="burger-3">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="burger-4">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="burger-5">
  <span></span>
  <span></span>
  <span></span>
</div>

div { margin:10px;}

.burger-1 {
  position:relative;
  width:44px;
  height:44px;
  background:white;
  cursor:pointer;
  .flex();
  span {
    display:block;
    width:20px;
    height:2px;
    background:black;
    border-radius:1px;
    transition:800ms all
      ;
    &::before,&::after {
      content:'';
      display:block;
      width:20px;
      height:2px;
      border-radius:1px;
      background:black; 
      position:relative;
      transition:400ms all;
    }
    &::before {
      top:-5px;
    }
    &::after {
      bottom:-3px
    }
  }
}

.burger-1.active {
  span { 
    transform:rotate(-315deg); 
    background:red;
    &::before { 
    opacity:0;
    }
    &::after {
      transform:rotate(90deg) translate(-25%); 
    background:red;
    }
  }
}

//

.burger-2 {
  position:relative;
  width:44px;
  height:44px;
  background:white; 
  cursor:pointer;
  .flex();
  span {
    display:block;
    width:20px;
    height:2px;
    background:black;
    border-radius:1px;
    transition:400ms background 0ms, 400ms transform 0ms;
    &::before,&::after {
      content:'';
      display:block;
      width:20px;
      height:2px;
      border-radius:1px;
      background:black; 
      position:relative;
      transition:400ms background 0ms, 400ms transform 400ms;
    }
    &::before {
      top:-5px;
    }
    &::after {
      bottom:-3px;
      opacity:1;
      transition:400ms opacity 600ms
    }
  }
}

.burger-2.active {
  span { 
    background:red;
    transform:rotate(135deg);
    transition:400ms transform 400ms, 400ms background 400ms;
    &::before {
      background:red;
      transform:rotate(90deg) translatex(5px);
      transition: 400ms transform 0ms, 400ms background 400ms;
    }
    &::after { 
      opacity:0; 
      transition:400ms opacity 0ms
    }
  }
}

//

.burger-3 {
  position:relative;
  width:44px;
  height:44px;
  background:white;
  cursor:pointer;
  .flex();
  flex-direction:column;
  span {
    display:block;
    width:20px;
    height:2px;
    background:black;
    border-radius:1px; 
    transition:350ms all;
    &:nth-of-type(1) {
      transform:translatey(-3px)
    }
    &:nth-of-type(3) {
      transform:translatey(3px)
    }
  }
}

.burger-3.active {
  span { 
    margin:0;
    &:nth-of-type(1) {
      transform:translatey(21px) rotate(45deg); 
    background:red;
    }
    &:nth-of-type(2) {
      width:100%;
      height:100%;
      opacity:0
    }
    &:nth-of-type(3) {
      transform:translatey(-21px) rotate(-45deg); 
    background:red;
    }
  }
}

//

.burger-4 {
  position:relative;
  width:44px;
  height:44px;
  background:white;
  cursor:pointer;
  .flex();
  flex-direction:column;
  span {
    display:block;
    width:20px;
    height:2px;
    background:black;
    border-radius:1px; 
    transition:350ms all;
    &:nth-of-type(1) {
      transform:translatey(-3px)
    }
    &:nth-of-type(2) {
      background:black;
      height:0;
      width:18px;
      border:1px solid black
    }
    &:nth-of-type(3) {
      transform:translatey(3px)
    }
  }
}

.burger-4.active {
  span { 
    margin:0; 
    &:nth-of-type(1) {
      background:red; 
      transform:translatey(17px) rotate(-135deg);
    }
    &:nth-of-type(2) {
      width:28px;
      height:28px;
      border-radius:28px;
      background:none;
      border:2px solid red
    }
    &:nth-of-type(3) {
     
      background:red; transform:translatey(-17px) rotate(135deg);
    }
  }
} 

//

.burger-5 {
  position:relative;
  width:44px;
  height:44px;
  overflow:hidden;
  background:white;
  cursor:pointer;
  .flex();
  flex-direction:column;
  transition:1s all;
  span {
    display:block;
    width:20px;
    height:2px;
    background:black;
    border-radius:1px; 
    transition:1s all;
    &:nth-of-type(1) {
      transform:translate(0,-3px)
    }
    &:nth-of-type(2) {
    }
    &:nth-of-type(3) {
      transform:translate(0,3px)
    }
  }
}

.burger-5.active {
  background:red;
  span { 
    margin:0; 
    background:white;
    &:nth-of-type(1) {
      animation:1s topBar forwards;
    }
    &:nth-of-type(2) {
      animation:1s middleBar forwards;
    }
    &:nth-of-type(3) {
      animation:1s bottomBar forwards;
    }
  }
}
.burger-5.inactive {
  span { 
    margin:0; 
    &:nth-of-type(1) {
      animation:1s topBarR forwards;
    }
    &:nth-of-type(2) {
      animation:1s middleBarR forwards;
    }
    &:nth-of-type(3) {
      animation:1s bottomBarR forwards;
    }
  }
}

//keyframes

@keyframes topBar {
  0% {
    transform:translate(0px, -3px) rotate(0deg);
    width:20px
  }
  50% {
    transform:translate(-20px, -3px) rotate(65deg);
    width:2px
  }
  100% {
    transform:translate(0px, 3px) rotate(135deg);
    width:20px
  }
}
@keyframes topBarR {
  100% {
    transform:translate(0px, -3px) rotate(0deg);
    width:20px
  }
  50% {
    transform:translate(-20px, -20px) rotate(65deg);
    width:2px
  }
  0% {
    transform:translate(0px, 3px) rotate(135deg);
    width:20px
  }
}


@keyframes middleBar {
  0% {
    transform:rotate(0deg);
    opacity:1
  }
  100% {
    transform:rotate(180deg);
    opacity:0
  }
}
@keyframes middleBarR {
  100% {
    transform:rotate(0deg);
    opacity:1
  }
  0% {
    transform:rotate(180deg);
    opacity:0
  }
}


@keyframes bottomBar {
  0% {
    transform:translate(0px, 3px) rotate(0deg);
    width:20px
  }
  50% {
    transform:translate(20px, 3px) rotate(-65deg);
    width:2px
  }
  100% {
    transform:translate(0px, -1px) rotate(-135deg);
    width:20px
  }
}
@keyframes bottomBarR {
  100% {
    transform:translate(0px, 3px) rotate(0deg);
    width:20px
  }
  50% {
    transform:translate(20px, 3px) rotate(-65deg);
    width:20px
  }
  0% {
    transform:translate(0px, -3px) rotate(-135deg);
    width:20px
  }
}

//codepen styling
.flex {
  display:flex;
  justify-content:center;
  align-items:center;
}
body {
  font-family:sans-serif;
  height:100vh;
  margin:0;
  background:#ddd;
  .flex()
}

$('.burger-1').click(function() {
  $(this).toggleClass('active');
});

$('.burger-2').click(function() {
  $(this).toggleClass('active');
});

$('.burger-3').click(function() {
  $(this).toggleClass('active');
});

$('.burger-4').click(function() {
  $(this).toggleClass('active');
});

$('.burger-5').click(function() {
  $(this).toggleClass('active'); 
  if (!$(this).hasClass("active")) {
    $(this).addClass("inactive");
  } else {
    $(this).removeClass("inactive");
  }
});