1. まとめトップ

CSS3だけで実装!マウスオーバーエフェクトまとめ

css3だけで実装可能なマウスオーバーアニメーションをまとめました。

更新日: 2014年01月25日

33 お気に入り 88370 view
お気に入り追加

この記事は私がまとめました

kinaco_pさん

CSS3実装の前に、IE対策について

CSS3のアニメーションで多用されるtransitionプロパティ、animationプロパティはIE9以降のバージョンでは動作しません。

IE対策のためにjQueryでアニメーションを実装するのもひとつの手だと思います。

またIE独自のプロパティを使ってcss3と同様の効果を得られる場合もあります。

ボタンにホバーエフェクトを実装

これ使いたい!と思うエフェクトはほぼ網羅されています。

・背景カラーをふわっと変更する
・背景・ボーダー・文字カラーをふわっと変更する
・背景カラーが左右に分かれていく
・背景カラーが上下に分かれていく
・文字間隔を広げる
・背景を透過させ、ホバー時にうっすらと背景色を出す
・ボーダースタイルを変更する
・内側にブロックを表示する
・上から背景がするっと降りてくる
・左上から背景がするっと降りてくる
・奥から背景をふわっと表示させる #1
・奥から背景をふわっと表示させる #2
・上からパタッと要素が落ちてくる
・要素がパタッと開く
・キューブ状にクルッと回転する etc...

少し変わった動きをするアニメーションがまとめられています。

・くるくる回る
・ぶるぶる振動する
・アイコンが拡大する
・枠線を拡大する
・3D的にくるっと奥に一回転する

流行りのフラットデザインと相性が良さそうなエフェクトがまとめられています。

円形のアイコンを使ったホバーエフェクトがまとめられています。

ボタンや画像用のエフェクトが40種類以上まとめられているスタイルシートです。

立体的なアニメーションなど12種類のエフェクトがまとめられています。

テキストリンクにホバーエフェクトを実装

テキストリンクにも実装出来そうなエフェクトがまとめられています。

画像にホバーエフェクトを実装

画像のキャプションをアニメーション付きで表示します。

画像と円形のコンテンツを使ったアニメーションです。

画像を拡大表示させる場合に使えそうです。

1