【CSS】animation付きハンバーガーアイコン(🈪→×)の作り方

※udemy動画内容の備忘録です。

index.html

<button class="mobile-menu-icon"
    onclick="document.querySelector('body').classList.toggle('menu-open');">
        <span></span>
        <span></span>
        <span></span>
    </button>

style.scss

$cBlack: #000;
$cWhite: #fff;
.mobile-menu-icon {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;

  & > span {
    background-color: $cBlack;
    width: 35px;
    height: 2px;
    display: block;
    margin-bottom: 9px;
    transition: transform 0.3s;

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.menu-open {
  background-color: $cBlack;

  & .mobile-menu-icon {
    & > span {
      background-color: $cWhite;

      &:nth-child(1) {
        transition-delay: 0.1s;
        transform: translateY(11px) rotate(135deg);
      }
      &:nth-child(2) {
        transform: translateX(-18px) scaleX(0);
      }
      &:nth-child(3) {
        transform: translateY(-11px) rotate(-135deg);
      }
    }
  }
}