【CSS3】CSSを利用したアニメーション効果の参考サイトまとめ
CSS3を利用したアニメーション効果の参考サイトを忘却録的に乗せておきます。
3 cool CSS3 image hover effects
マウスオーバーすると画像が消えてキャプションが表示されます。
CSSのみで実装するキャプションエフェクト 20
こちらはマウスオーバーすると画像の上にキャプションが表示されるアニメーションです。
Original Hover Effects
10種類のマウスオーバーアニメーションが掲載されています。
12 fancy buttons
12種類のマウスオーバーアニメーションが掲載されています。
- https://codepen.io/bartekd/pen/qFsDf
CSSのみで実装するボタンデザインやホバーエフェクト 20+α
CSSのみでデザイン、アニメショーンエフェクトを実装しているボタンなどが掲載されています。
Creative CSS3 Animation Menus
CSS3でデザイン、アニメーションを実装しているメニューボタンのサンプルが10種類掲載されています。
CSS Ghost Buttons
2015年に流行ると言われているゴーストボタンをCSS3で実装しています。
CSS3アニメーションに挑戦!色が移り変わる背景を実装しよう
CSS3のキーフレームアニメーションについて詳しく掲載されています。
Creative Link Effects
CSS3で実装されているメニューのアニメーションエフェクトのサンプルが数点掲載されています。
SpinKit | Simple CSS Spinners
ページローディングのアニメーションをCSS3で実装しているサンプルが掲載されています。
CSS3 Hover Effects
写真の拡大ができることを示唆できるアニメーションを集めたページです。
3D Thumbnail Hover Effects
紙を折りたたんだようなアニメーションエフェクトのサンプルが掲載されています。
iHover
様々なホバーアニメーションが掲載されており、とにかく数が多いです。
Magic Animations CSS3
扉が開くようなアニメーションエフェクトのサンプルが多数掲載されています。
Animate.css
60種類以上の数多くのアニメーションエフェクトが掲載されています。
Hover.css
フラットデザインに合いそうなアニメーションエフェクトが多数掲載されています。
コメントを残す