『自慢したくなる』コピペ大歓迎のCSS画像アニメーション５５選！【完全オリジナルコード】

[<img width="883" alt="スクリーンショット 2020-07-27 23.47.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/d5d7df10-a0a0-c1f9-c7fe-5213915de4da.png">
](https://www.twinzlabo.com)

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

---
##【真似したくなる】transform：rotate×scaleでCSS画像アニメーション３選


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

###１.  transform rotateX×scaleで【縦回転】CSS画像アニメーション
<img width="701" alt="スクリーンショット 2020-07-27 23.27.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/cf7e3aa5-7df5-7f54-e7c7-d9257b898383.png">


###２. transform rotateY×scaleで【横回転】CSS画像アニメーション
<img width="696" alt="スクリーンショット 2020-07-27 23.27.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/cc923450-58bb-4210-3985-ea3f03dc7377.png">


###３. transform rotateY/Z×scaleで【3D回転】画像アニメーション
<img width="689" alt="スクリーンショット 2020-07-27 23.27.57.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/7199b145-7906-3065-c4e7-6c899eb6f360.png">

---
##transform:translateで絵画デザインのスライドショーを実現！CSSスライダーアニメーション３選


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

###１. クリックで右方向からスライドしてくるアニメーション
<img width="522" alt="スクリーンショット 2020-07-27 23.31.41.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2059db12-fdab-228f-dcd8-8b1207f5408e.png">


###２. クリックで上からスライドしてくるアニメーション
<img width="516" alt="スクリーンショット 2020-07-27 23.31.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c44583ba-403c-d6d5-5fbd-16ed9efcc5be.png">


###３. クリックで斜め上からスライドしてくるアニメーション
<img width="512" alt="スクリーンショット 2020-07-27 23.31.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/65897bab-a431-426c-9901-ee38e2fcceb3.png">

---
##【transform：rotate×scale】回転×拡大するCSS画像アニメーション３選


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

###１. 【縦回転】transform rotateXで画像アニメーション
<img width="698" alt="スクリーンショット 2020-07-27 23.34.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/d2984c91-6476-ddb7-c408-2c4eab9a0fe4.png">


###２. 【横回転】transform rotateYで画像アニメーション
<img width="695" alt="スクリーンショット 2020-07-27 23.34.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/04f00ade-4301-3bc7-9bcf-42548d26e74b.png">


###３. 【3D回転】transform rotateYZで画像アニメーション
<img width="695" alt="スクリーンショット 2020-07-27 23.34.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/625925da-f89f-f583-a852-472eaa014511.png">

---
##filterとtransformでリアルな絵画デザインのCSSスライダーアニメーション３選


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

###１. クリックで横幅が伸び縮みしながらスライドするアニメーション
<img width="522" alt="スクリーンショット 2020-07-27 23.36.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/364bd601-d716-d945-47da-94699ffd5e65.png">


###２. クリックで縦幅が伸び縮みしながらスライドするアニメーション
<img width="513" alt="スクリーンショット 2020-07-27 23.36.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/bd246ab6-d24d-c8c3-dcf6-1e0f736fb784.png">


###３. クリックで思いっきり伸び縮みしながらスライドするアニメーション
<img width="507" alt="スクリーンショット 2020-07-27 23.36.43.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/548b455d-e999-8995-0530-9ae46bd537c3.png">

---
##filterとtransformで超動くCSSスライダーアニメーション４選【Web制作者必見】


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

###１. 縦回転するシンプルなスライダーアニメーション
<img width="498" alt="スクリーンショット 2020-07-27 23.39.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/a06f972b-346f-26a4-54a3-53701535f095.png">


###２. 滑らかに横回転するスライダーアニメーション
<img width="501" alt="スクリーンショット 2020-07-27 23.39.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/5c9fece4-4384-17eb-dc37-4a0b012ee5ca.png">


###３. 平面回転するスタイリッシュなスライダーアニメーション
<img width="498" alt="スクリーンショット 2020-07-27 23.39.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/4673bca9-bf55-c753-7899-b23b207b376a.png">

---
##【transform×回転『rotate』】CSS画像アニメーション３選


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

###１. 【縦回転】transform rotateXで画像アニメーション
<img width="708" alt="スクリーンショット 2020-07-27 23.41.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/101e68de-0591-51cd-bbea-a47f506e15df.png">


###２. 【横回転】transform rotateYで画像アニメーション
<img width="699" alt="スクリーンショット 2020-07-27 23.41.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/79c720d9-a6a9-886b-c342-d2557d21dc03.png">


###３. 【3D回転】transform rotateYZで画像アニメーション
<img width="701" alt="スクリーンショット 2020-07-27 23.41.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8da3e751-b074-ae12-a14a-01e98d804920.png">

---
##【transform rotate×画像背景】CSS回転アニメーション３選


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

###１. 【縦回転】transform rotateX画像背景アニメーション
<img width="679" alt="スクリーンショット 2020-07-27 23.43.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/cab3f098-5268-10a9-e46a-8fbcea949b21.png">


###２. 【横回転】transform rotateY画像背景アニメーション
<img width="684" alt="スクリーンショット 2020-07-27 23.43.37.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8bbf84c1-00ea-3ab0-c2b7-a4f44d0f0479.png">


###３. 【3D回転】transform rotateYZ画像背景アニメーション
<img width="677" alt="スクリーンショット 2020-07-27 23.43.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/d9a6b138-0490-070e-7829-6570c575d59a.png">

---
##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)