햄버거 메뉴 애니메이션 #1

Animated Burger Icon

이 포스팅에서는 햄버거 메뉴를 CSS3의 keyframes과 jQuery를 이용하여 좀더 인터랙티브한 아이콘으로 구현하는 방법을 소개합니다.

Source & Result

See the Pen 햄버거 메뉴 애니메이션 by jaeheekim (@jaehee) on CodePen.

SCSS Type

SCSS를 사용하는 경우는 다음과 같습니다. 

scss

// burger
.container {
  position: relative;
  height: 28px;
  width: 36px;
  cursor: pointer;
  .line-top,
  .line-middle,
  .line-bottom {
    position: absolute;
    display: block;
    height: 4px;
    width: 36px;
    border-radius: 2px;
    background: #fff;
  }
  .line-top {
    top: 0;
    transform-origin: 34px 2px;
  }
  .line-middle {
    top: 12px;
    transition: opacity 200ms linear;
  }
  .line-bottom {
    bottom: 0;
    transform-origin: 34px 2px;
  }
  &.is-open {
    .line-top {
      animation: line-top-out 600ms linear normal;
      animation-fill-mode: forwards;
    }
    .line-middle {
      opacity: 0;
    }
    .line-bottom {
      animation: line-bot-out 600ms linear normal;
      animation-fill-mode: forwards;
    }
  }
  &.is-closed {
    .line-top {
      animation: line-top-in 600ms linear normal;
      animation-fill-mode: forwards;
    }
    .line-middle {
      transition-delay: 200ms;
    }
    .line-bottom {
      animation: line-bot-in 600ms linear normal;
      animation-fill-mode: forwards;
    }
  }
}

@keyframes line-top-in {
  0% {
    left: -5px;
    bot: 0;
    transform: rotate(-45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    transform: rotate(-60deg);
  }
  80% {
    left: 0;
    bot: 0;
    transform: rotate(15deg);
  }
  100% {
    left: 0;
    bot: 1px;
    transform: rotate(0deg);
  }
}

@keyframes line-top-out {
  0% {
    left: 0;
    top: 0;
    transform: rotate(0deg);
  }
  20% {
    left: 0;
    top: 0;
    transform: rotate(15deg);
  }
  80% {
    left: -5px;
    top: 0;
    transform: rotate(-60deg);
  }
  100% {
    left: -5px;
    top: 1px;
    transform: rotate(-45deg);
  }
}

@keyframes line-bot-in {
  0% {
    left: -5px;
    transform: rotate(45deg);
  }
  20% {
    left: -5px;
    bot: 0;
    transform: rotate(60deg);
  }
  80% {
    left: 0;
    bot: 0;
    transform: rotate(-15deg);
  }
  100% {
    left: 0;
    transform: rotate(0deg);
  }
}

@keyframes line-bot-out {
  0% {
    left: 0;
    transform: rotate(0deg);
  }
  20% {
    left: 0;
    transform: rotate(-15deg);
  }
  80% {
    left: -5px;
    transform: rotate(60deg);
  }
  100% {
    left: -5px;
    transform: rotate(45deg);
  }
}

// stage
body {
  background: linear-gradient(135deg, #121721 0%, #000000 100%) fixed;
  color: #FFF;
  font: 300 16px/1.5 "Open Sans", sans-serif;
}
.stage {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Related Info

1. 햄버거 메뉴 #2

Jaehee's e-room