hover時に素敵な動きを加えてくれるcss3アニメーション10選 part2

  • このエントリーをはてなブックマークに追加

今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。

以前紹介した記事はこちら


今回は一部jsやSVGと組合せているものもあります。
また、一部IEや古いブラウザなどに対応していないものが多いので、そちらは各ページをご確認ください。


Creative Button Styles

img06
DEMO サイト

ボタンなどのhoverアニメーションに使えそうなアニメーションです。
押して楽しいボタンがいっぱいあります。



Creative Link Effects

img04
DEMO サイト

こちらもボタンなどのhoverアニメーションに使えそうなアニメーションです。
動き自体はシンプルながらもおしゃれで使い勝手もよさそう。



Button Styles Inspiration

img12
DEMO サイト

またまたボタンなどのhoverアニメーションに使えそうなアニメーションです。
こちらはとにかくサンプルの量が多いので、気に入った動きを見つけられそうです。



Some More Subtle Hover Effect Ideas

img01 DEMO サイト

写真にhoverをすると、素敵な効果を与えてくれるアニメーションです。
お気に入り登録させるボタンがあるものなどがあり、使い勝手がよさそうです。


Shape Hover Effect with SVG

img02
DEMO サイト

css、SVG・jsを使用しているアニメーションです。
作りはちょっと複雑かもしれませんが、デモのhoverした時何が出てくるのかというワクワク感が素敵です。


Caption Hover Effects

img03
DEMO サイト

hover時にキャプションとボタンをおしゃれに出してくれるアニメーション。
『クリックできる』というのが認識しやすくなれば使い勝手がよさそうです。



Tilt Hover Effects

img05
DEMO サイト

画像に上からフィルターをかけて、hover時にアニメーションしてくれます。
サイトの雰囲気がおしゃれになりそうです。


TEXT STYLES & HOVER EFFECTS

img08
DEMO サイト

テキストに対してhoverアニメーションを付けられます。
スタイリッシュでかっこいいアニメーションですね。


Circle Hover Effects

img09
DEMO サイト

丸型の要素へのhoverアニメーションです。
使い勝手はともかくとしてデモ3や6の動きが個人的に面白いなあと思います。


Direction-Aware Hover Effec

img10
DEMO サイト

マウスを要素上で移動させると、hoverで出現するキャプションがマウスに沿って動いてくれます。
説明が下手なのでとりあえずデモを触っていただければと思います…。面白いです。
jQueryも使用しています。

執筆者:工藤[ WEBデザイナー ]

WEBデザイナー。 最近はWordPressを触るのが好きです。よろしくお願いします。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。