現役フロントエンドエンジニアがガチでおすすめ！画像アニメーション４９選

[<img width="830" alt="スクリーンショット 2020-07-02 0.24.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/a74d58fd-7779-30b2-842a-fc644d4551a2.png">
](https://www.twinzlabo.com)



こちらの記事に記載のデザイン・コードは全て自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
＊動きだけ確認したい初学者の方は[JSFiddle](https://jsfiddle.net/)使ってみるといいですよ


---

## １. hoverで画像が拡大(ズーム)するCSSアニメーション３選(＋filterエフェクト)
[![hover-animation-zoom-image-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/09c19143-ee41-b6c4-d505-e99761966969.png)
](https://www.twinzlabo.com/hover-animation-zoom-images/)

## ２. box-shadowとhoverで3D画像に動きをつけるCSSアニメーション３選！
[![hover-3d-image-animation.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/de9aecd5-2152-e729-25fb-715dbdcfdeec.png)
](https://www.twinzlabo.com/css-animation-hover-3dimage/)

## ３. hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)
[![hover-animation-image-onbackground.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/4f301b36-9138-12be-6c28-3337769576af.png)
](https://www.twinzlabo.com/hover-animation-image-onbackground/)

## ４. CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)
[<img width="837" alt="hover-4effect-image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3bfc3823-4617-ec6b-987e-9bbffb3330ec.png">
](https://www.twinzlabo.com/hover-4effect-image/)

## ５. hoverとfilter:grayscaleで白黒に切り替え！CSS画像エフェクト３選
[![hover-animation-filter-grayscale.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/9a9a1631-942b-b010-ea66-b32beee38855.png)
](https://www.twinzlabo.com/hover-effects-filter-grayscale/)

## ６. hoverとtransformで画像が回転するCSSアニメーション3選【3分で作れる！】
[![hover-animation-spin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/85ff5f33-60cc-1fc8-b023-8c42d789ee20.png)
](https://www.twinzlabo.com/css-animation-hover-image-spin/)

## ７. hoverで画像がスライド！margin-leftとscaleでCSSアニメーション3選
[![hover-animation-slides.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/e317ff26-64ae-475b-b5a6-ed669a6df159.png)

](https://www.twinzlabo.com/css-animation-hover-slide-transition/)

## ８. hoverとfilter:brightnessで明るさ調節！CSS画像エフェクト３選
[![filter-brightness-topimage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/db13b9f1-af0c-c872-2172-eaaa2280800f.png)
](https://www.twinzlabo.com/hover-animation-filter-brightness/)

## ９. overflow: hiddenで美しい！CSSアニメーション３選(画像一覧)
[![hover-animation-overflow-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/e49c2ad6-e3e2-b0f0-bf79-a0853d0e0b9d.png)
](https://www.twinzlabo.com/hover-images-overflow-animation/)

## １０. 【CSSだけ】filterとopacityで洗練されたスライダーアニメーション3選
[![click-animation-slider-top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/6b47d11a-8adf-fed7-db00-b854ced53d82.png)
](https://www.twinzlabo.com/click-animation-sliders-3pickup/)

## １１. hoverで画像が鏡みたいに反射！position:absoluteとfilter多用でCSSアニメーション3選
[![css-effects-hover-filter-absolute.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3f231c07-4e43-c347-987a-3c955ff5caba.png)
](https://www.twinzlabo.com/css-effects-hover-filter-absolute/)

## １２. hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選
[![css-effects-hover-filter-hue-rotate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/bbe1ca76-e1ce-a162-2231-b148fa1293fd.png)

](https://www.twinzlabo.com/css-effects-hover-filter-hue-rotate/)

## １３. transitionとfilterで美しく変化するCSS画像エフェクト５選(基礎から応用まで)
[![hover-animation-filters-transition.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3222eeec-e36d-8713-41fb-5bb24a52066d.png)
](https://www.twinzlabo.com/hover-animation-filters-transition/)

## １４. hoverでぼかし画像が動き出す！filter:blurとtransitionでCSSエフェクト3選
[![css-cool-effects-hover-filter-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0150566e-abe4-0a56-1988-98ef027aca67.png)
](https://www.twinzlabo.com/css-effects-hover-filter/)

## １５. 【filterプロパティ】hoverすると美しさ100倍！CSS画像エフェクト３選
[![hover-effects-filters-mix.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c015011d-5795-b6b9-ba03-d3cee7f5844a.png)
](https://www.twinzlabo.com/hover-effects-filters-mix/)

---
いかがでしたでしょうか？
お役に立てたら嬉しいです。

最後に注意書きとして
コメント欄に心ないコメントを投稿する方がまれにいますが迷惑なので問答無用で速攻ブロックします。