【コピペ可】ハンバーガーメニューのアニメーション４選

【コピペ可】ハンバーガーメニューの開閉アニメーション４選

2022年6月4日2022年7月15日

コピペ可能なハンバーガーメニューの閉開アニメーションを４つほどご紹介します。それぞれデモとサンプルコードを用意しました。メニュー要素にjavascriptでis-active クラスを付け替えることでアニメーションを実現しています。ハンバーガーメニューのボタンのアニメーションは「【CSS】ハンバーガーメニューのボタンアニメーション４選」に載せています。

スライドイン（最初のデモと同じ）

メニューが右からスライドインしてくるアニメーションです。

/* アニメーション前のメニューの状態 */
.menu{
  transform: translateX(100vw);
  transition: all .3s linear;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  transform: translateX(0);
}

フェードイン

メニューがふわっと不透明になって表示されるアニメーションです。

See the Pen 最もシンプルなハンバーガーメニュー実装方法０2 by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen.

/* アニメーション前のメニューの状態 */
.menu{
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s linear;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  pointer-events: auto;
  opacity: 1;
}

くるっと回転しながら現れる

メニューが左上から回転して現れるアニメーションです。

/* アニメーション前のメニューの状態 */
.menu{
  transform-origin: top left;
  transform: rotateZ(-90deg);
  transition: all .3s ease;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  transform: rotateZ(0deg);
}

拡大しながら現れる

メニューが大きくなりながら現れるアニメーションです。

See the Pen 最もシンプルなハンバーガーメニュー実装方法０4 by YutoSeta / ホームページ制作のエクレア (@yutoseta) on CodePen.

/* アニメーション前のメニューの状態 */
.menu{
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  transform: scale(.5);
  transition: all .3s ease;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
  pointer-events: auto;
  opacity: 1;
  transform: scale(1.0);
}