コピペ可能なCSSのハンバーガーメニューの閉開アニメーションを4つほどご紹介します。それぞれデモとサンプルコードを用意しました。メニュー要素にjavascriptでis-active
クラスを付け替えることでCSSアニメーションを実現しています。
スライドイン(最初のデモと同じ)
/* アニメーション前のメニューの状態 */
.menu{
transform: translateX(100vw);
transition: all .3s linear;
}
/* アニメーション後のメニューの状態 */
.menu.is-active{
transform: translateX(0);
}
フェードイン
See the Pen 最もシンプルなハンバーガーメニュー実装方法02 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 最もシンプルなハンバーガーメニュー実装方法04 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);
}