CSS3を利用したアニメーション効果の参考サイトを忘却録的に乗せておきます。

3 cool CSS3 image hover effects

マウスオーバーすると画像が消えてキャプションが表示されます。

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

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

こちらはマウスオーバーすると画像の上にキャプションが表示されるアニメーションです。

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

Original Hover Effects

10種類のマウスオーバーアニメーションが掲載されています。

• https://tympanus.net/Tutorials/OriginalHoverEffects/index.html

12 fancy buttons

12種類のマウスオーバーアニメーションが掲載されています。

• https://codepen.io/bartekd/pen/qFsDf

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

CSSのみでデザイン、アニメショーンエフェクトを実装しているボタンなどが掲載されています。

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

Creative CSS3 Animation Menus

CSS3でデザイン、アニメーションを実装しているメニューボタンのサンプルが10種類掲載されています。

• https://tympanus.net/Tutorials/CreativeCSS3AnimationMenus/index.html

CSS Ghost Buttons

2015年に流行ると言われているゴーストボタンをCSS3で実装しています。

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

CSS3アニメーションに挑戦！色が移り変わる背景を実装しよう

CSS3のキーフレームアニメーションについて詳しく掲載されています。

• https://www.webcreatorbox.com/tech/css3-animation-colour/

Creative Link Effects

CSS3で実装されているメニューのアニメーションエフェクトのサンプルが数点掲載されています。

• https://tympanus.net/Development/CreativeLinkEffects/

SpinKit | Simple CSS Spinners

ページローディングのアニメーションをCSS3で実装しているサンプルが掲載されています。

• https://tobiasahlin.com/spinkit/

CSS3 Hover Effects

写真の拡大ができることを示唆できるアニメーションを集めたページです。

• https://www.alessioatzeni.com/wp-content/tutorials/html-css/CSS3-Hover-Effects/index.html

3D Thumbnail Hover Effects

紙を折りたたんだようなアニメーションエフェクトのサンプルが掲載されています。

• https://tympanus.net/Tutorials/3DHoverEffects/index.html

iHover

様々なホバーアニメーションが掲載されており、とにかく数が多いです。

• https://gudh.github.io/ihover/dist/index.html

Magic Animations CSS3

扉が開くようなアニメーションエフェクトのサンプルが多数掲載されています。

• https://www.minimamente.com/example/magic_animations/

Animate.css

60種類以上の数多くのアニメーションエフェクトが掲載されています。

• https://daneden.github.io/animate.css/

Hover.css

フラットデザインに合いそうなアニメーションエフェクトが多数掲載されています。

• https://ianlunn.github.io/Hover/