時間差バウンス開閉ハンバーガー
3 本線がいっせいに動くのではなく、 transition-delay を 0s ・ .08s ・ .16s とずらすことで 時間差で順番に X へ変形 するスタッガード演出のメニューボタンです。
解説
3 本線がいっせいに動くのではなく、transition-delay を 0s・.08s・.16s とずらすことで時間差で順番に X へ変形するスタッガード演出のメニューボタンです。さらにイージングに cubic-bezier(.34,1.56,.64,1) を使い、終端でわずかに行き過ぎてから戻る軽いバウンスを効かせているため、タップしたときの手応えが楽しくなります。中央の線は scaleX(0) で横につぶれて消えます。動作の切り替えは aria-pressed のみで JavaScript も最小限です。
合う場面
- 遊び心を出したいサービスサイトやキャンペーン
- 子ども向け・エンタメ系などポップな世界観の UI
- マイクロインタラクションで離脱を防ぎたいヘッダー
順番に動くタイミングは各 transition-delay の値で、跳ね具合はイージングの数値で調整できます。バウンスを弱めたいときは cubic-bezier の 1.56 をより小さくしてください。動きが連続するぶん酔いやすい人もいるため、prefers-reduced-motion ではディレイとバウンスを外して素直な変形にしておくと安心です。
使用例・適したシーン
- お問い合わせフォームの送信ボタン
- 資料ダウンロードの CTA
- ヒーローセクションの主要 CTA
- サブスク・申込ボタン
よくある質問
線が順番に動くタイミングは調整できますか？
はい。各線の transition-delay（0s・0.08s・0.16s）の値を変えれば、時間差の間隔を広げたり詰めたりできます。すべて 0s にすれば一斉に動く通常のハンバーガーになります。
跳ねるような動きを弱めたいです。
イージングの cubic-bezier(.34,1.56,.64,1) の 1.56 という値がバウンスの強さを決めています。この数値を 1.1 程度まで下げると行き過ぎが減り、落ち着いた変形になります。