ここ最近は前以上にアニメーションをcssに頼るようになってきた気がします。
今回は主にhover時のアニメーションのコードを配布してくださっているサイトをご紹介します。
使用時の注意事項などは各サイトをご覧ください。
目次
Hover.css
![](https://blog.8bit.co.jp/wp-content/uploads/2020/08/200827_01.jpg)
サイトへ
お馴染みHover.cssです。嫌味がなく使い勝手のいいアニメーションがそろっています。
CSS ANIMO
![](https://blog.8bit.co.jp/wp-content/uploads/2020/08/200827_02.jpg)
サイトへ
hoverとローディングのアニメーションがそろっています。
要素をクリックするとコードのコピーができます。hoverした時に下線を引くアニメーションなどでもいくつかパターンを用意してくれています。
Magic Animations CSS3
![](https://blog.8bit.co.jp/wp-content/uploads/2020/08/200827_03.jpg)
サイトへ
hoverだけじゃなくてスクロール時などにも使えそうなアニメーションがそろっています。
ちょっと癖は強めですが、インパクトがあります。
Css Effects
![](https://blog.8bit.co.jp/wp-content/uploads/2020/08/200827_04.jpg)
サイトへ
hover系・ローディング・スクロール時の矢印のアニメーションがそろっています。
シンプルなものが多いので、使い勝手もいいと思います。
CSSWAND
![](https://blog.8bit.co.jp/wp-content/uploads/2020/08/200827_05.jpg)
サイトへ
hover系・ローディングのアニメーションがそろっています。
input要素へのクリック時のアニメーションもあまり見かけないのでいいですね。
Imagehover.css
![](https://blog.8bit.co.jp/wp-content/uploads/2020/08/200827_06.jpg)
サイトへ
画像hover時にテキストが出てくるアニメーションが豊富にあります。
癖もないので使いやすそうです。
Izmir Hover Effects
![](https://blog.8bit.co.jp/wp-content/uploads/2020/08/200827_07.jpg)
サイトへ
こちらも画像hover時のアニメーションです。
動きがスタイリッシュでかっこいいですね。