MENU ICON INTERACTION

Hamburger
Menu Demo

サイト右上でおなじみの「三」マークが×に変わる開閉アニメーションのパターン集。ボタンをタップ（クリック）すると開閉が切り替わります。すべてCSSのtransitionとクラスの付け外しだけで実装しています。

Simple X

上下のバーが回転して×に、真ん中のバーは消える。いちばんよく見る定番の動き。

rotate(±45deg) / 真ん中は opacity: 0

×になるまでにバーがくるっと一回転近く回る。回転量を増やすだけで印象が大きく変わる。

rotate(±315deg)

左回りに大きく回って×へ。真ん中のバーは幅が縮んで消える。スタイリッシュに見せたいときに。

rotate(135deg / 45deg) / width: 0

03の反対方向に回るバージョン。並べて見ると回転方向だけで受ける印象が違う。

rotate(45deg / 135deg)

真ん中のバーがスッと横に飛んで消え、残りが×になる。小気味よい動き。

translate(100%) + opacity: 0

2本のバーがワンテンポずれて×になる。時間差があるだけで印象に残る。

transition-delay で時間差をつける

2本のバーが一度真ん中に集まってから×に変化する二段階アニメーション。

top → transform の順に transition-delay

三本線が散って＋マークが現れ、そのまま回転して×になる。いちばん凝った二段構え。

バー退場 → ＋を表示 → rotate(45deg)

2本のバーが横に拭き取られて消え、浅い×が時間差で描かれる。「魔法少女まどか☆マギカ」公式サイト風の上品なワイプ演出。

::before の width を 0↔100% でワイプ