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

[<img width="750" alt="スクリーンショット 2020-07-25 19.02.30.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/5b628643-f8fd-18a6-50ec-d468691182a6.png">
](https://www.twinzlabo.com/)

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

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

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

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

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


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

### １. コピペだけでCSSアニメーション！そのまま使えるシンプルなハンバーガーメニュー３選

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

[![hamburger-1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2b243a8f-fc0f-30d6-08d8-94c3d04a671c.png)
]()

### ２. コピペでCSSマテリアルデザイン！Web制作で使えるオシャレなハンバーガーメニュー３選

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

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

[![hamburger-2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/4b674b2e-1902-ced8-d199-6bdaefd1a95a.png)
]()

### ３. 動きが面白すぎる！コピペでオシャレなハンバーガーメニュー３選【CSSマテリアルデザイン】

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

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

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

[![hamburger-3-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/78cafec4-494a-63a2-1a19-499da55da1c4.png)
]()

### ４. hoverするとtransformでモノクロボタンが変形！Web制作で使える奇抜なハンバーガーメニュー３選

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

[![hamburger-4-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c39e0ceb-a8e8-f891-ee12-122c27235fa9.png)
]()

### ５. サイドメニューの幅をラクラク切り替え！Web制作で使える便利なハンバーガーメニュー３選

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

[![hamburger-5-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/7fa9b952-017a-0f43-495a-3c82b2fdadc6.png)
]()

### ６. ハンバーガーメニューの仲間たち！Web制作で使えるおもしろハンバーガーメニュー３選【実装手順】

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

[![hamburger-6-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/7ff9d3a2-8702-42af-ab12-221d4550ddb1.png)
]()

### ７. サイト作成で100%役立つ！Web制作用ハンバーガーメニュー３選【コピペOK】

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

[![hamburger-7-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/6d1ff031-2e9b-e6b3-2c36-46c7aa61bc61.png)
]()

### ８. サイドバーがクルクル回転！Web制作用ハンバーガーメニュー３選【コピペOK】

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

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

[![hamburger-8-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/4054b097-8c8f-0153-eea1-e283a6f67fd9.png)
]()

### ９. サイドバーがスーッとスライド！Web制作で重宝するハンバーガーメニュー３選【コピペOK】

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

[![hamburger-9-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/122c4359-48f2-451e-7a77-9d7db8f46f15.png)
]()

### １０. サイドバーがブワーッと拡大！Web制作でそのまま使えるCSSハンバーガーメニュー３選

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

[![hamburger-10-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/f4f3cf06-28be-1d0f-18d3-47196e0298a7.png)
]()

### １１. サイドバーが吹っ飛んでくる！サイト制作で即行使えるCSSハンバーガーメニュー３選

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

[![hamburger-11-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/bca77e98-6dc8-9601-b02b-0204b6e1fa22.png)
]()