【CSS】ハンバーガーメニューの開閉アニメーション４選

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

このページの目次

1 スライドイン（最初のデモと同じ）
2 フェードイン
3 くるっと回転しながら現れる
4 拡大しながら現れる

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

/* アニメーション前のメニューの状態 */
.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);
}