【知って得する】Vueで使える画像アニメーション３３選(解説あり)

[<img width="654" alt="スクリーンショット 2020-07-24 1.10.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/88092cab-febd-af2a-6fda-520a6650629e.png">
](https://www.twinzlabo.com)

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)
プロジェクトに取り込んでより充実したデザインにしてもらえれば○
コードは全てリンク先に説明付きで記載してあります


---
##clip path polygonで2枚の画像を半々(三角形)で表示するCSSアニメーション３選


**動きは下の画像のような感じになります**

###１. 【ぼやけるアニメーション】clip path : polygon＋filter : blur
![clip-path-image-animation1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/202e7035-ea28-b177-b9c8-fc9a90eb8652.png)


###２. 【美しいアニメーション】clip path : polygon＋filter : grayscale contrast saturate
![clip-path-image-animation2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/ea23f77b-d8a5-631b-a6aa-55b8281d24cd.png)


###３. 【オーロラアニメーション】clip path : polygon＋filter : grayscale saturate hue-rotate
![clip-path-image-animation3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/f8ef58a4-4cc2-785b-dc53-adf350739d13.png)



---
##【解説付き】マテリアルデザインをコピペで実装！CSSスライダーアニメーション６選（filter編）

**動きは下の画像のような感じになります**

###１. hoverで画像が半透明に？超便利なスライダーアニメーション
![click-animation-sliders-filter-opacity.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/f4f54485-61dd-b113-f755-5e0e33de494c.png)


###２. hoverで画像の色が暴れ出すスライダーアニメーション
![click-animation-sliders-filter-hue-rotate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0f1b624a-85c3-37aa-2c5d-aad2be9df895.png)


###３. hoverでモノクロ画像が200倍色鮮やかになるスライダーアニメーション
![click-animation-sliders-filter-grayscale.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/e2bc5be6-d43a-c026-2e69-eb6419d66026.png)


---
##絶対失敗しないナビゲーションメニューサンプル３選

**動きは下の画像のような感じになります**

###１. シンプルだけど洗練されたスライダーアニメーション
![click-animation-sliders.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c17a95eb-f7aa-a070-0578-d4dca01c8933.png)

###２. blurでぼやけながらスライドするスライダーアニメーション
![click-animation-sliders2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c132c78c-6eb0-79ad-cc56-e4f33d06903d.png)

###３. blurとmargin-leftでぼやけながら右へスライドするスライダーアニメーション
![click-animation-sliders3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/17353ae2-2a60-f351-5e4f-918c7d9d66f2.png)


---
##hoverで画像の色が暴れ出す！filter: hue-rotateとtransitionでCSSエフェクト3選

**動きは下の画像のような感じになります**

###１. 画像がイルミネーションみたいに光りながら回転するhoverエフェクト
![css-effects-hover-filter-hue-rotate-spin.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8d9f8369-46fd-30e3-d092-45fc526051f6.png)

###２. 臨場感あふれる花火画像が立体的に回転するhoverエフェクト 
![css-effects-hover-filter-hue-rotate-spin2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c566d267-f3a1-ea68-c38d-e2486dbf1b58.png)

###３. 色相回転しながらぼかしアニメーションを効かせて消えていくhoverエフェクト
![css-effects-hover-filter-hue-rotate-blur.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3bbd6994-17ed-ca0c-73f6-2e558fd502a4.png)



##CSSだけ！hoverとtransitionで作る動的画像エフェクト4選(コピペOK)

**動きは下の画像のような感じになります**

###１. 階段のように背景が現れるhoverエフェクト
![animation-image-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/ee3bf122-9233-d92d-a7a6-a9c85622466c.png)

###２. 上からブロックが落ちてくるように背景が現れるhoverエフェクト
![animation-image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/b3905a88-0cec-e41a-5106-771dfb75441a.png)

###３. 斜め上からスクリーンのように背景が現れるhoverエフェクト
![animation-image3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8cfd8abb-cf51-8024-1d3f-10338c9b6cc9.png)

###４. 手裏剣のように回転(rotate)しながら背景が現れるhoverエフェクト
![animation-image4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/a1c0c155-b618-b3f2-1c6e-d9fa25cafc0e.png)


##hoverとtransitionでオシャレなCSS画像エフェクト４選！(背景がスっと表示される)

**動きは下の画像のような感じになります**

###１. フワッと背景が現れるhoverアニメーション

![hover-animation-image-fadein.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c19adee0-dac3-69a3-cce3-39e9fa62fc97.png)

###２. 背景が徐々に画像全体へ広がるhoverアニメーション

![hover-animation-image-box.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c90861cb-a3fd-61f7-df1c-aa2e6cd0c16d.png)

###３. 扉が閉まるように背景が現れるhoverアニメーション

![hover-animation-image-door.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/fe872155-476d-5dd2-e2f6-96d28215e6bc.png)

###４. 丸い背景が徐々に画像全体に広がるhoverアニメーション

![hover-animation-image-squere.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/bcc14203-823e-72c2-d2fa-c9675f7cc138.png)


##【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション３選

**動きは下の画像のような感じになります**

###１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
![transform-rotate-flexbox-animation1-228x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/b07356b2-4482-088b-ad46-e8fffff394f3.png)

###２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
![transform-rotate-flexbox-animation2-265x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/7e05b8f9-bbee-ab2f-85e4-0cae638fab89.png)


###３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
![transform-rotate-flexbox-animation3-275x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/57e86bea-add8-687d-55cf-b14b9f0846ef.png)


##【徹底解説】flexを応用して画像が伸縮するCSSアニメーション３選

**動きは下の画像のような感じになります**

###１. flexで２つの画像が伸縮する画像アニメーション
![flex-bigger-images-animation1-265x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/cd1b5fa5-26e6-4933-81bd-7a68fe2a28d9.png)

###２. flexでhoverした画像が100％拡大する画像アニメーション
![flex-bigger-images-animation2-266x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/1f3fb23f-748f-c0ed-c07c-d28b05dc651b.png)

###３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
![flex-bigger-images-animation3-300x249.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/7c40cde2-fe32-1a08-b1d6-f73ab5bc0d7e.png)



##【flexboxのjustify−content：center４選】CSS画像アニメーションを画面中央に配置

**動きは下の画像のような感じになります**

###１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
![flexbox-justify−content-animation-image1-300x74.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/d62da4f6-ed55-233e-4dd6-355ccc3f0a7f.png)


###２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
![flexbox-justify−content-animation-image2-300x76.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/b972ec00-f428-67a3-ae45-8b9d7fb38aa0.png)


###３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
![flexbox-justify−content-animation-image3-300x77.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/eadea220-1f70-437a-6b12-07bf7fd23a1f.png)


###４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
![flexbox-justify−content-animation-image4-300x77.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/f1e44f13-977e-deaa-ae4f-6dda54b0cb90.png)