ハンバーガーメニューが矢印に変わる CSS アニメーションを真似してみた

仕事で Backlog を使っている。Backlog のページには、左側のメニューを収納したり戻したりするための「ハンバーガーメニュー」アイコンがあり、これにマウスカーソルを乗せると矢印のアイコンにアニメーションで変化する。コレが面白かったので、実装を調べて、改良版を作ってみた。

• デモ：Hamburger Arrow
• コード：frontend-sandboxes/index.html at master · Neos21/frontend-sandboxes

span.arrow の中に span.inner を置くのが基本。span.arrow にはホバー時に左右どちら向きの矢印にしたいかによって、span.arrow.left か span.arrow.right とクラスを複合で付けてやる。

Backlog のサイト上の実装だと span が3重になっていて、span 1つでやりたかったが無理が出てくるので二重 span に留めた。

span.inner がハンバーガーの中央の線、span.inner::before が上の線、span.inner::after が下の線になっている。

ホバー時に、::before と ::after に対して、transform プロパティの translate (位置の変更) と rotate (回転) を指定して矢印になるように配置する。また、矢印にした時に棒の長さを少し縮めたいので、width も指定している。

transition-property というプロパティを初めて知ったのだが、コレに width, transform と指定することで、transition によってアニメーションで変化させるプロパティを限定することができる。パフォーマンス向上に繋がるらしい。今回は width で幅を縮め、transition で移動と回転を行うだけなのでこのように指定した。

translateX は線の太さが 2px である関係から、直感的な数値から 1px ズラして配置することでイイカンジになる。愚直に見た目を操作するだけだ。