ブログに使いたい!ハンバーガーメニューのアニメーションサンプルまとめ

今回はCSSで作ったハンバーガーメニューのサンプルコードをまとめてみました。

スマホのデザインに取り入れやすいと思います。自分で良さそうなものを見ていってください。

また、クラスの有無でスタイルを変更するので、そこはjQueryでなんとかしましょう笑

 

HTML

HTMLはspanタグを3つ作ってハンバーガーメニューのようにします。よくある構成ですね。

<div class="icon-animation type-1">
<span class="top"></span>
<span class="middle"></span>
<span class="bottom"></span>
</div>

 

ではCSSのコードを見ていきます。

なお、CSSは全てSassで書いているので注意してください。

 

xに変化

定番の動きですが、クリックすると真ん中の棒が無くなり、上下の棒がxになります。

色々なサイトに取り入れられているので、直感的に使いやすいと思います。

.type-1 {
  span {
    transition: all 0.3s;
    transform: rotate(0deg);
  }
  .top {
    transform: translateY(-17px);
  }
  .bottom {
    transform: translateY(17px);
  }
}
.type-1.is-open {
  .middle {
    background: rgba(255, 255, 255, 0);
  }
  .top {
    transform: rotate(-45deg) translateY(0px);
  }
  .bottom {
    transform: rotate(45deg) translateY(0px);
  }
}

 

ホバーすると縮む

先ほどのメニューで、ホバーしたときに上下の棒がキュッと縮まるようにしてみます。

ホバーしたときに動くとよりわかりやすくなりますね。

.type-2 {
  span {
    transition: all 0.3s;
    transform: rotate(0deg);
  }
  .top {
    transform: translateY(-17px);
  }
  .bottom {
    transform: translateY(17px);
  }
}

.type-2:hover {
  .top {
    transform: translateY(-20px);
  }
  .bottom {
    transform: translateY(20px);
  }
}

.type-2.is-open {
  .middle {
    background: rgba(255, 255, 255, 0);
  }
  .top {
    transform: rotate(-45deg) translateY(0px);
  }
  .bottom {
    transform: rotate(45deg) translateY(0px);
  }
}

真ん中の棒が横に飛んでいく

クリックしたときに真ん中の棒が右側にシュッと飛んでいくようにします。

真ん中の棒はtransformで位置を変えつつ透過させます。

.type-3 {
  span {
    transition: all 0.3s;
  }
  .middle {
    transform: translateX(0px);
  }
  .top {
    transform: translateY(-17px);
  }
  .bottom {
    transform: translateY(17px);
  }
}

.type-3.is-open {
  .middle {
    transform: translateX(100px);
    background: rgba(255, 255, 255, 0);
  }
  .top {
    transform: rotate(-45deg) translateY(0px);
  }
  .bottom {
    transform: rotate(45deg) translateY(0px);
  }
}

上下の棒が回転する

クリックしたときに上下の棒が回転しながらxになります。

真ん中の棒は透過させて見えないようにします。

また、rotateの値を405度と指定することで1回転してxにすることができます。

.type-4 {
  span {
    transition: all 0.5s;
    transform: translateY(0px) !important;
  }
  .top {
    margin-top: -17px;
    transform: rotate(0deg) !important;
  }
  .bottom {
    margin-top: 17px;
    transform: rotate(0deg) !important;
  }
}

.type-4.is-open {
  .middle {
    background: rgba(255, 255, 255, 0);
  }
  .top {
    transform: rotate(-405deg) !important;
    margin-top: 0px;
  }
  .bottom {
    transform: rotate(405deg) !important;
    margin-top: 0px;
  }
}

線が消えながら回転する

クリックすると上下の棒がすっと左右に消え、真ん中の棒がxに変わります。

また、真ん中のxに変わる棒は擬似要素で作ります。

.type-5 {
  .inner {
    width: 50px;
    height: 50px;
    margin: auto;
    position: relative;
    padding: 75px 0;
  }
  span {
    transition: width 0.2s, right 0.2s, left 0.2s;
  }
  .top {
    transform: translateY(-17px);
    left: 0px;
    right: 0px;
  }
  .middle {
    transform: translateY(0px);
    position: relative;
    background: none;
    &:before, &:after {
      content: "";
      transition: all 0.2s;
      display: block;
      position: absolute;
      width: 50px;
      height: 1px;
      left: -25px;
      background: #fff;
      transform: rotate(0deg);
    }
  }
  .bottom {
    transform: translateY(17px);
    left: 0px;
    right: 0px;
  }
}

.type-5.is-open {
    .top {
      left: 100%;
      width: 0px;
    }
    .middle {
      &:before {
        transform: rotate(135deg);
      }
      &:after {
        transform: rotate(45deg);
      }
    }
    .bottom {
      right: 100%;
      width: 0px;
    }
  }

 

上下の線が真ん中に集まった後にxになる

上下の線を真ん中に集めるというアニメーションと、その後xになるという2つのアニメーションを必要とするので、transitionだけでは実装できません。

なのでanimationを使ってアニメーションを作ります。

アニメーションは2つの動きを用意しないと戻るときにアニメーションせずにパッと戻ってしまうので注意しましょう。

.type-6 {
  span {
    position: relative;
    transition: 0.3s opacity;
  }
  .top {
    animation: type6-top .5s;
    animation-fill-mode: forwards;
  }
  .middle {
    transition: .5s opacity;
    transform: translateY(-1px);
    opacity: 1;
  }
  .bottom {
    animation: type6-bottom .5s;
    animation-fill-mode: forwards;
  }
}

.type-6.is-open {
  .middle {
    opacity: 0;
    transition: .5s opacity;
  }
  .top {
    animation: type6-top-close .5s;
    animation-fill-mode: forwards;
  }
  .bottom {
    animation: type6-bottom-close .5s;
    animation-fill-mode: forwards;
  }
}

@keyframes type6-top {
  0% {
    transform: translateY(0px) rotate(-45deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-17px) rotate(0deg);
  }
}

@keyframes type6-bottom {
  0% {
    transform: translateY(-1px) rotate(45deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(15px) rotate(0deg);
  }
}

@keyframes type6-top-close {
  0% {
    transform: translateY(-17px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(-45deg);
  }
}

@keyframes type6-bottom-close {
  0% {
    transform: translateY(15px) rotate(0deg);
  }
  50% {
    transform: translateY(0px) rotate(0deg);
  }
  100% {
    transform: translateY(-1px) rotate(45deg);
  }
}

 

上下の棒が真ん中に集まってxになる

上下(真ん中も)の棒が中央に集まって透過しつつ、xに変わるというアニメーションです。

こちらはいっぺんに動くのでtransitionを使って作りましょう。

.type-7 {
  span {
    transition: all 0.3s;
  }
  .top {
    transform: translateY(-17px) scale(1);
  }
  .middle {
    background: none;
    position: relative;
    &:before, &:after {
      transition: all 0.3s;
      content: "";
      width: 50px;
      height: 1px;
      background: #fff;
      display: block;
      transform: rotate(0deg);
      position: absolute;
    }
  }
  .bottom {
    transform: translateY(17px) scale(1);
  }
}

.type-7.is-open {
  .top {
    transform: translateY(0px) scale(0);
  }
  .bottom {
    transform: translateY(0px) scale(0);
  }
  .middle {
    &:before {
      transform: rotate(45deg);
    }
    &:after {
      transform: rotate(-45deg);
    }
  }
}

 

真ん中の棒が分かれる

真ん中の棒が中央で割れて左右にとび、上下の線も割れてそれぞれ中央に集まりxになります。

全ての棒を擬似要素で設定し、割れる動きができるようにします。

.type-8 {
  span {
    position: relative;
    background: none;
    transition: all 0.3s;
    &:before, &:after {
      transition: all 0.3s;
      content: "";
      width: 25px;
      height: 1px;
      display: block;
      background: #fff;
      position: absolute;
    }
    &:before {
      transform: translateX(0px);
      opacity: 1;
    }
    &:after {
      transform: translateX(25px);
      opacity: 1;
    }
  }
  .top {
    transform: translateY(-17px);
  }
  .middle {
    transform: translateY(0px);
  }
  .bottom {
    transform: translateY(17px);
  }
}

.type-8.is-open{
  .middle {
    &:before {
      transform: translateX(-100px);
      opacity: 0;
    }
    &:after {
      transform: translateX(100px);
      opacity: 0;
    }
  }
  .top {
    transform: translateY(-10px);
    &:before {
      transform: translateX(8px) rotate(45deg);
    }
    &:after {
      transform: translateX(25px) rotate(-45deg);
    }
  }
  .bottom {
    transform: translateY(5px);
    &:before {
      transform: translateX(8px) rotate(-45deg);
    }
    &:after {
      transform: translateX(25px) rotate(45deg);
    }
  }
}

 

波紋が広がる

真ん中の棒が横に飛び、上下の棒がxになると同時に波紋が広がるようにします。

波紋は真ん中の棒の擬似要素で作ります。また、アニメーション自体は後から出てくるのでanimationを使います。

.type-9 {
  span {
    transition: all 0.4s 0.4s;
    &:before, &:after {
      content: "";
    }
  }
  .top {
    transform: translateY(-17px);
  }
  .middle {
    position: relative;
    background: none;
    &:after{
      content: "";
      display: block;
      width: 100px;
      height: 100px;
      border-radius: 100%;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      margin-top: -50px;
      position: absolute;
    }
    &:before{
      content: "";
      transition: all 0.4s;
      width: 50px;
      display: block;
      height: 1px;
      background: #fff;
      transform: translateY(0px) translateX(0px);
      opacity: 1;
    }
  }
  .bottom {
    transform: translateY(17px);
  }
}

.type-9.is-open {
  .bottom {
    transform: translateY(0px) rotate(45deg);
  }
  .top {
    transform: translateY(0px) rotate(-45deg);
  }
  .middle {
    &:before{
      transform: translateY(0px) translateX(100px);
      opacity: 0;
    }
    &:after{
      content: "";
      animation: type9-circle .5s;
      animation-fill-mode: forwards;
    }
  }
}

@keyframes type9-circle{
  0%{
    transform:scale(0);
    opacity: 1;
    border: 1px solid #fff;
  }
  100%{
    opacity: 0;
    border: 1px solid #fff;
    transform:scale(1.5);
  }
}

 

まとめ

以上ハンバーガーメニューのアニメーションまとめでした。

たくさんアニメーションが使われているので、CSSでアニメーションを作る勉強にもなると思います。

どこがどう動いているかを確認しながら、理解に役立てるとよりいいですね。

自分でもオリジナルのアニメーションをするハンバーガーメニューを作ってみても面白いかもしれません。