Day 107

Building an animated hamburger menu...
#CodingPhase #TheCodingWay #365CodingPhaseChallenge

**********

.hamburger,
.hamburger::before,
.hamburger::after {
  content: '';
  display: block;
  background: rgb(42, 31, 94);
  height: 3px;
  width: 1.5em;
  border-radius: 3px;
  transition: all ease-in-out 500ms;
}

.hamburger::before {
  transform: translateY(-6px);
}

.hamburger::after {
  transform: translateY(3px);
}

.open .hamburger {
  transform: rotate(45deg);
}

.open .hamburger::before {
  opacity: 0;
}

.open .hamburger::after {
  transform: translateY(-3px) rotate(-90deg);
}