CodePenで公開されている、CSSでエフェクトやアニメーションを付けたいときに参考になるデモ 15

Stacked Cards Hover Effects

ホバーすると要素の位置がずれると同時に後ろの要素が表示され、カードが重ねられているような見せ方にすることができます。
後ろの要素として配置されているものは疑似要素で作成されており、表示される位置も上下左右だけでなく斜め方向や扇状などひと通り用意されています。

Card over view

ホバー時に上にある要素が非表示になって下の要素が表示されるという動きを様々なアニメーションで表現したものです。
フェード・スライド・フリップなど全20タイプ用意されており、カードタイプと相性が良さそうです。

Efectos Css3

ボックスやイメージなどにホバーしたときに利用できそうなエフェクトがまとめられており、要素が浮き上がったりシャドウを表示したりなど全14タイプあります。
いずれも簡易的なものですし、少し自分で微調整した方が良さそうなものもあったりしますが、ざっくりどのようなエフェクトを指定するか確認してもらうときなどにも使えそうです。

Hamburger Icon Animations

ハンバーガーメニューをクリックした際の動きが12タイプまとめられており、よくある「×」に変化するタイプだけでなく、矢印に変化させたり傾けたりしたものがあります。

CSS3 Hover Effects

サークルタイプの要素と相性が良さそうなホバーエフェクトが全15タイプまとめられています。

Line Button Hover Effects

ボタンのホバーエフェクトとしてラインをアニメーションさせるサンプルがまとめられており、2方向動くものや4方向それぞれで動くものなど全8タイプあります。

Sass mixin library for text hover

テキストリンクと相性が良さそうなホバーエフェクトがまとめられており、ラインが引かれたり背景色が塗られていくようなエフェクトが多数用意されています。
どのようなエフェクトがあるのかは、ウィンドウサイズが大きい場合は画面左側のリストから、小さい場合はハンバーガーメニューをクリックで表示されるリストから確認することができ、気になるエフェクト名をクリック後に「HOVER ME」にホバーすることで確認できます。

Pure CSS hexagonal spinners

六角形をモチーフにしたスピナーが全18タイプあります。
全体的にdivの入れ子が激しいですが、見栄え・アニメーションともに画像は使用せずにHTMLとCSSで実装されています。

CSS spinners

こちらはサークルタイプのスピナーで全20タイプあり、span要素ひとつとHTMLもシンプルです。

CSS Loader

同じくサークルタイプのスピナーで全9タイプです。

CSS loaders and timing functions

同じくサークルタイプのスピナーで、こちらの場合は見栄えもシンプルですべて同じものになりますが、それぞれanimation-timing-functionの指定が違うために異なるアニメーションの感じになっています。

Pure CSS toggle buttons

input type="checkbox"をCSSで装飾＋チェック時にアニメーション実装したものです。

CSS Particle Effects

パーティクルエフェクトのアニメーションをCSSで表現したもので全5タイプのデモがあります。
表示されている要素ひとつひとつがspan要素になっており、見栄えの指定に加えてそれぞれ異なる位置指定やanimation-delayを設定する作りになっています。
このデモにあるようにJavaScript使ってspanを生成したり少しずつ異なるスタイルを指定していくのが無難ですが、頑張ればHTMLとCSSのみでこのような見せ方ができます。

10 stunning hover effects with scss

非対応のブラウザがあったりもするので使い所は限られますが、ユニークなホバーエフェクトが10タイプ紹介されています。

10 stylish hover effects with less

同じく非対応のブラウザがあるので使い所は限られてしまいますが、こちらもユニークなホバーエフェクトが10タイプ紹介されています。

以前にもCSSを使ってエフェクトやアニメーションを付ける際に参考になるデモやテクニックをまとめており、いずれも上で紹介してきたもの以外になるので、興味ある方はこちらもご覧ください。