hamburger-anim.css

.hamburger {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.bar {
  margin: 2px;
  width: 24px;
  height: 4px;
  background: black;
  border-radius: 2px
}

.bar-1 {
  transition: transform 0.5s;
}

.hamburger.on .bar-1 {
  transform: rotate(-45deg) translate(-7px, 6px);
  transition-delay: 0.2s;
  transform-origin: 50% 0%;
}


.bar-3 {
   transition: transform 0.5s;
}

.hamburger.on .bar-3 {
   transform: rotate(45deg) translate(-5px, -6px);
    transition-delay: 0.2s;
   transform-origin: 50% 50%;
}

.bar-2 {
   transition: transform 0.5s, opacity 0.5s;
   opacity: 1;
}

.hamburger.on .bar-2 {
   transform: translateX(20px);
   opacity: 0;
}