【現役Vueエンジニア厳選】完全オリジナルの画像エフェクト"総まとめ２３選"(コピペOK)

[<img width="672" alt="スクリーンショット 2020-07-07 18.05.39.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3917f1cb-9052-a155-0b8a-3e19227db0e4.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)