More than 3 years have passed since last update.

【100%見たことない】完全オリジナル！ハンバーガーメニューのCSSアニメーション３３選（解説付き）

Last updated at 2020-08-17Posted at 2020-07-25

コピペだけで作れるハンバーガーメニューのCSSアニメーションを３３個ご紹介します。

box-shadow, filter, transform,などをふんだんに使っており、transitionで滑らかな動きが表されています

コードには説明もわかりやすく書いてあるのでかなり参考になります

完全オリジナルでコピペだけで実装できてしまうお手軽なアニメーションとなっています

Webデザイン初心者の方はもちろんですが、バックエンドエンジニアの方にもとても助かる内容になっています

CSSハンバーガーメニュー３３選

hoverやクリック（タップ）でデザインに変化が起きるよう作ってあるのでWeb制作やWebアプリケーション等でそのまま使えます。

そのまま使えるハンバーガーメニューのマテリアルデザインとなっています

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

遊び心のあるハンバーガーメニューになっています。

マテリアルデザインなのでコピペで使えますね

transition-durationを使っていてわかりやすく説明もされているのでかなり重宝します

hoverやクリック（タップ）でボタンが幽体離脱したりビリビリ震えるようなアニメーションなので、Web制作などで独創的なデザインを求められた時にそのまま使えるマテリアルデザインです。

transformを使っての奇抜なアニメーションに加えて、メニューボタンをクリックすると表示されるサイドバーの幅の比率を変えたハンバーガーメニューです。

一般的なハンバーガーメニューアイコンではなく円形の点を使ったり、長さの異なるボーダーを使ったりして少し遊び心のあるデザインとなっています。

ハンバーガーメニューをクリックするとサイドバーが回転しながら表示されるCSSアニメーションとなっています。

カスタマイズもしやすいのでありがたいデザインです

スライドにtransform:translateを使用した縦横スライドに加えてrotateの回転もプラスした３種類のマテリアルデザインとなっています。

スライドにtransform:scaleを使用した拡大アニメーションに加えてtranslateのスライドとrotateの回転もプラスした３種類のマテリアルデザインとなっています。

スライドにtransform:skewを使用した傾斜の効いたアニメーションに加えてtranslateでスライドをプラスした３種類のマテリアルデザインです。