css3アニメーションのレパートリーがきっと増える！動きの参考になる22サイト

HTML・CSS 最終更新日：2020/02/14 公開日：2015/03/06

css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。

つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。
今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました！

1：丸型オブジェクトにピッタリのアニメーションギャラリー

丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。
何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね！

2：個性的なキャプション表示アニメーション（1）

サムネイル画像にマウスオーバーすると、画像が移動し、その下に隠れていたキャプションが表示されます。軽快なアニメーションで、ギャラリーサイト等で使えそうです。

http://www.webdesignerdepot.com/2015/02/3-cool-css3-image-hover-effects/

3：個性的なキャプション表示アニメーション（2）

2とは逆の発想で、サムネイル画像にマウスオーバーすると、その上にキャプションを被せます。一つひとつのアニメーションに対して詳しく説明があり、大変わかりやすいです。

http://www.nxworld.net/tips/css-only-caption-effect.html

4：個性的なキャプション表示アニメーション（3）

こちらもキャプション表示のアニメーション集です。ダイナミックな動きが目を引きます。
若干アニメーション時間が長いので、ケースバイケースで使用箇所を考えたいところです。

http://tympanus.net/Tutorials/OriginalHoverEffects/index.html

5：画像不使用！css3ボタンサンプル集（1）

画像要らずで、css3だけで完結するアニメーションを12種類見ることが出来ます。
ただし空のdivや、同じ記述のdivを重ねて表現しているものが多いため、SEOで気になる方は要注意です。

6：画像不使用！css3ボタンサンプル集（2）

上と同じく画像要らずで、css3だけで完結するアニメーションのチュートリアル＆DEMOです。
こちらの特徴は「::before」や「::after」等の擬似要素を使用することによって、簡潔なhtmlのみで表現ができるという点です。

http://www.nxworld.net/tips/css-only-button-design-and-hover-effects.html

7：大切な部分は後から見せるボタン

「DEMO1」「DEMO2」「DEMO4」の表現が秀逸です。
大切な部分はあえて隠しておき、動きを伴った表示によって強調する見せ方がとっても斬新。上部のDEMO1～DEMO7を選択することで、他のパターンも確認できます。

http://tympanus.net/Tutorials/AnimatedButtons/

8:インパクトある動きを盛り込んだボタン

わずか1秒弱の動きですさまじいインパクトがあります。
スルスル動いてくれるので、マウスオーバーするのも楽しくなりそう！

http://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html

9:ゴーストボタンのわかりにくさもcss3でカバー

2015年に流行ると言われているゴーストボタンですが、サイトに馴染むメリットがある反面、ボタンであることを認識されづらいというデメリットがあります。
そのマイナス部分をcss3アニメーションで補っている例として、ぜひご参考に。

http://rb-demo.blogspot.jp/2014/12/css-ghost-buttons.html

10：@keyframesを利用して、背景色を動的に変更！

@keyframesとは、animationプロパティで使用できる指定で、アニメーション中のキーフレーム（通過点）到達時にどのような描画をするかを記述することができます。
こちらでは、各キーフレームで背景色を変え、自動的に背景色が切り変わっていくアニメーションのチュートリアルと共に、animationの関連プロパティも丁寧に説明されています。