画像にホバーした時や、ロード・クリック時などに適応したいアニメーションエフェクトまとめです。

クリックアニメーション

画像をクリックすることがトリガーとなってアニメーションが始まるサンプルです。

Card Expansion Effect with SVG clipPath

画像をクリックすると、アニメーションが発火して、画像に紐付いたコンテンツが展開して表示されます。
デモは４つ用意されていますが、どれもモーションが美しくなめらかです。

• Card Expansion Effect with SVG clipPath

Animated Grid Layout

サムネイルをクリックすると、それに紐疼いたコンテンツが読み込まれ、アニメーションを伴って表示されます。

• AnimatedGridLayout

ホバーエフェクト

image hover 63 effects

63のホバーエフェクト。

• image hover 63 effects

Image Tilt Effect

ホバーするとチルトエフェクト(マウスの位置に応じて画像に傾きを与える)を発生させます。
オプションが豊富で、デモで違いをグリグリ動かして試してみることができます。

• ImageTiltEffect

Hover Effect Ideas

キャプション付き画像の様々なホバースタイルのサンプル集。
それぞれにぴったりなエフェクト名がつけられていて、ソースをダンロードすれば、クラスを該当要素に記述すれば簡単にエフェクトを実装できる。

• Hover Effect Ideas

IMAGE CAPTION HOVER ANIMATION

キャプションを伴ったシンプルで簡単なものだけになりますが、
どこにでも使える凡庸性があり、拡張したりアレンジするのにちょうどいいです。

• IMAGE CAPTION HOVER ANIMATION

ihover

いろいろな方がお世話になっているか思いますが、なんといってもコレクションの量が豊富です。
そして、アニメーションクオリティも高く、どれもどこかで使ってみたい気になります。
オーソドックスな矩形のものと、あまり見かけないサークル状のインタラクションがコレクションされています。

該当のクラスを付与するだけでアニメーションを実装できるので、簡単で、デモにも丁寧にソースコードが掲載されているので、安心です。

• ihover

imagehover.css

キャプションを伴ったシンプルなエフェクトです。
無料版でも十分ですが、種類や個性的なエフェクトが魅力な有料のバージョンも用意されています。

• imagehover.css

Hover.css

豊富なボタンエフェクトがコレクションされていますが、単純にリンクを表お元したいときなど画像に使ってみるのもいいと思います。

• Hover.css

Anicollection

こちらもボタンエフェクトの豊富なコレクションですが、」画像に使ってみるのもいいでしょう。

• Anicollection

Caption Hover Effects

フラットな配色やデザインのサムネイルにぴったりな、エフェクト集です。

• Caption Hover Effects

CSS Image Hover Effects

キャプションを伴った、シンプルで実装しやすいエフェクト集。
新しいfilter系プロパティを使ったエフェクトも用意されています。

• CSS Image Hover Effects

おわります。