CSS3アニメーションを使ったメニューやボタンのサンプル紹介【289種類+α】

2017年9月17日css, WEB制作

CSSアニメーションエフェクトを使った表現のメニューや、ボタンを作るときに参考にさせてもらっているサイトのご紹介。WEBデザインでメニューやボタン、画像のキャプション表示等のエフェクトに悩んだ時に見て欲しいDEMOの紹介です。

フラットデザインやマテリアルデザインにも調和するので、デザインに悩んだ時にどうぞ。

CSS3初心者はまずこちらをどうぞ

CSS3をまだ勉強し始めや、扱いに慣れていない方は、こちらの記事を見ておいたほうがいいかもしれない。昔に書いた記事で、transitionについて解説した記事。

結構頑張って書いたんだが、全然アクセスが無いのでしつこいくらいに紹介していく(笑)

css3 初心者の為のtransitionについてのまとめ

昔に作ったbox-shadowのCSSアニメーションの基本のサンプルがあったのを思い出したので、貼っておく。box-shadowだけでもこういった表現も出来るという参考になればいいと思っている。

See the Pen css3 box-shadow transition sample31 by Shinji Yonetsu (@jquerybloger) on CodePen.

WEB上にある記事で一番分かりやすい記事と思ったのがこちら。
この記事を見たら大体の使い方は把握できると思う。

動くCSSのためのメモ。

CSS3アニメーション参考サイト

各サイトでソースのダウンロードや解説があるので参考に。

Inspiration for Button Styles and Effects

Inspiration for Button Styles and Effects
Inspiration for Button Styles and Effects

解説ページ
DEMOページ

20種類のCSSアニメーションのサンプルが掲載されている。
解説ページからソースのダウンロードが可能。

Icon Hover Effects

Simple Icon Hover Effects
Simple Icon Hover Effects

解説ページ
DEMOページ

18種類のアイコンホバーエフェクトのサンプルが掲載。
解説ページからソースのダウンロードが可能。

Creative Link Effects

Creative Link Effects
Creative Link Effects

解説ページ
DEMOページ

21種類のメニューに使えそうなCSSアニメーションエフェクトのサンプル。
解説ページからソースのダウンロードが可能。

CSSのみで実装するキャプションエフェクト 20

CSSのみで実装するキャプションエフェクト 20
CSSのみで実装するキャプションエフェクト 20

解説ページ
DEMOページ

WEBデザイン関連に役立つ記事が豊富で、様々なサンプルデモを掲載しているNxWorldさんのブログより
20種類の画像のキャプション表示やホバー時に使えるアニメーションエフェクトが掲載。
日本語で解説されているので分かりやすい。

Original Hover Effects

Original Hover Effects
Original Hover Effects

解説ページ
デモページ

10種類のぬるぬる動くカッコいいキャプションエフェクトのサンプルデモが掲載。
解説ページでソースのダウンロードが可能。
一部IE非対応。

Creative CSS3 Animation Menus

Creative CSS3 Animation Menus
Creative CSS3 Animation Menus

解説ページ
DEMOページ

10種類のアイコンを駆使したホバーアニメーションメニューのサンプル。
シンプルながらもアニメーションさせる要素のバランスが良くスタイリッシュ。
解説ページでソースのダウンロードが可能。

3D Thumbnail Hover Effects

3D Thumbnail Hover Effects
3D Thumbnail Hover Effects

解説ページ
DEMOページ

5種類の画像が折りたたまれるアニメーションのサンプルが掲載。
transform3Dやjavascriptを使用。
祖解説ページでソースのダウンロードが可能。

Animate.css

Animate.css
Animate.css

解説ページ
DEMOページ

73種類ものCSSアニメーションの基本サンプルの動作確認&ソースのダウンロードが出来るサイト。【Download Animate.css】からCSSファイル形式でソースのダウンロードが可能。githubで解説が記載されており、こちらからもソースのダウンロードが可能。

Hover.css

Hover.css
Hover.css

解説ページ
DEMOページ

109種類にも及ぶマウスホバー時の要素のアニメーションのサンプルが掲載。
githubよりソースのダウンロードが可能。解説もそちらに掲載。

その他

WEB上にはこれまで紹介してきた素晴らしいサンプルが至る所で公開されているのですが、まだまだ素晴らしいサンプルはたくさんあります。

自分が最近良く見ている中では、codepen等のコード共有サイトで、【CSS3】や【animation】などのキーワードで検索して探したりしています。CSS3で検索した場合はこのような感じに→Search Results for CSS3 on CodePen

検索メニューのAdvanced Optionsで条件を指定して検索も出来るので、どのようなサンプルが注目を集めているのか、目新しいテクニックを発見できたりとか、結構勉強になります。
Advanced Options Search
Advanced Options Search

デザインで中々いいアイデアが思い浮かばなかったり、悩んでいる時はこういったサイトを参考にすれば、いいインスピレーションが沸いてくるのでお勧めします。

この記事が気に入ったら
『いいね』しよう!