ハンバーガーメニューのアイコンが動くアニメーションを作りたい。[CSS+JavaScript]

今回はハンバーガーメニューが動くスタイルシートをご紹介したいと思います。
マウスオーバーのみのアニメーション、クリックをしてのアニメーションに加えて、スタイルシートとJavaScriptを使ったちょっとしたメニューを作ってみましたのでご参考ください。

マウスオーバーでアニメーションする場合

下記で紹介しているのはマウスが重なるとハンバーガーメニューがアニメーションするコードになります。

See the Pen menu by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

「.hamburger-menu」でハンバーガーメニューの全体的なレイアウトを定義します。
「display: flex」と「flex-direction: column」を使用して、縦に積み重ねるようにしています。
「.bar」でハンバーガーメニューの各バーのスタイルを定義します。
幅は100%、高さは4px、背景色は#333、アニメーションのトランジション効果を設定しています。
「.hamburger-menu:hover .bar:nth-child(1) 」などのセレクタで、マウスオーバー時のアニメーションを設定します。最初のバーは45度回転して下に移動し、真ん中のバーは透明度が0になり、最後のバーは-45度回転して上に移動するようにしています。

See the Pen menu_click by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

「<input type=”checkbox” id=”menu-toggle” class=”menu-toggle”>」はメニューの開閉をトリガーするためのチェックボックスです。
このチェックボックスは画面に表示されないようにしています（display: none;）。
「<label for=”menu-toggle” class=”hamburger-menu”>」はチェックボックスを操作するためのラベルです。
ハンバーガーメニューとして表示されます。
「.menu-toggle:checked + .hamburger-menu .bar」はチェックボックスがチェックされた状態をスタイル指定しています。
チェックボックスがチェックされたときに、各バーがアニメーションするようにします。

ちなみにですが、こちらのソースコードにプラスしてJavaScriptなどで制御すればよりアニメーションをした際の動作を細かく制御することも可能です。