今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。

Hover.css

サイト・デモ 主にボタンにカーソルを当てた時に使えそうなCSSライブラリです。 綺麗にまとめてくださっているので使いたいものがすぐに見つかりそうですね。

CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次

サイト・デモ 使い勝手のよさそうなエフェクトが用意されています。

CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15

サイト・デモ 画像にカーソルを当てた時の動きに使えそうなCSSをまとめてくださっています。

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

サイト・デモ カーソルを当てた時にキャプションを表示する際の動きについてまとめてくださっています。

イケテルオリジナルマウスオーバーCSS3アニメーション

サイト デモ こちらもキャプション表示する際に使えそうなcssです。 先にご紹介したものよりはちょっと変わり種の印象です。

Simple Icon Hover Effects

サイト デモ 丸型の要素カーソルを当てた時のアニメーションです。 かわいらしいので見てるだけで結構楽しいです。

CSS3で作るシンプルなマウスオーバーアニメーション5種

サイト デモ カーソルを当てると丸型の要素が大きくなったり回転したり、面白い動きをしてくれます。

Animated Buttons

サイト デモ カーソルを当てるとボタン内の画像が動いたり、テキストが現れたり… すごく印象に残るボタンを作ることができそうです。

Creative CSS3 Animation Menus

サイト デモ リンク要素内にテキストが複数入っているときに使えそうなアニメーションです。 動きがとてもかっこいいです。

動くCSSのためのメモ。

サイト・デモ とにかくすごい量のアニメーションを用意してくださっています。 明確なものを求めていなければここを見れば何かしらのヒントがもらえると思います。

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