DEMO
CODE
<div class="demo-stage"><button class="hm-btn" id="hmBtn"><span></span><span></span><span></span></button></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; }
.hm-btn { width:64px; height:64px; background:#1A1A1A; border:none; border-radius:12px; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px; }
.hm-btn span { display:block; width:30px; height:3px; background:#fff; border-radius:2px; transition:transform .35s ease, opacity .2s ease; }
.hm-btn.open span:nth-child(1) { transform:translateY(10px) rotate(45deg); }
.hm-btn.open span:nth-child(2) { opacity:0; }
.hm-btn.open span:nth-child(3) { transform:translateY(-10px) rotate(-45deg); }
document.getElementById('hmBtn').addEventListener('click', function(){
this.classList.toggle('open');
});
AI PROMPT
ハンバーガーメニューが×に変形するアイコンを作って。3本のspan（width:30px/height:3px、gap:7px）をflex縦並び。openクラスで1本目はtranslateY(10px)+rotate(45deg)、2本目はopacity:0、3本目はtranslateY(-10px)+rotate(-45deg)。transition .35sで滑らかに変形。クリックでopenをトグル。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
3本線がなめらかに×印へ変形するハンバーガーメニューアイコン。モバイルナビの開閉トグルに必須。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
フォーム入力・トグル・ボタン・お気に入りなど、小さな操作に対する手応え（マイクロインタラクション）に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。