.hamburger:hover > div:nth-child(1) {
  background-color: ghostwhite;
  animation-name: top;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

.hamburger:hover > div:nth-child(2) {
  animation-name: middle;
  animation-duration: 0.1s;
  animation-fill-mode: forwards;
}

.hamburger:hover > div:nth-child(3) {
  background-color: ghostwhite;
  animation-name: bottom;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

nav {
  opacity: 0;
  transition-duration: 1s;
}

.hamburger:hover ~ nav {
  opacity: 1;
}

@keyframes top {
  from {
    transform: rotate(0deg) translate(0, 0);
  }
  to {
    transform: rotate(45deg) translate(23px, 23px);
  }
}

@keyframes middle {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes bottom {
  from {
    transform: rotate(0deg) translate(0, 0);
  }
  to {
    transform: rotate(-45deg) translate(23px, -23px);
  }
}