【ただの自己満】VueCLIで使いやすいCSS画像アニメーション３１選

[<img width="875" alt="スクリーンショット 2020-08-10 16.07.33.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8cac6431-b052-1f5d-02da-8075d92d56c4.png">](https://www.twinzlabo.com)

こちらの記事に記載のデザイン・コードは全てオリジナルなので自由に使っていただいて大丈夫です(筆者が作成したため)

**Web制作で使えるかは保証できません。自己判断で修正するなりして参考程度に使ってください。**


---
##【回転×サイズ拡大/縮小】CSS画像アニメーション３選『解説付』


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

###１.  hoverで回転×拡大する画像アニメーション
![image-animation-size-rotate1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/4bcc4fd0-58b0-ea1f-dd03-1dd1ec8afc31.png)


###２. hover前後でサイズが拡大・縮小×回転する画像アニメーション
![image-animation-size-rotate2 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/c7c8884f-b68c-e4b8-c3f8-97c3d69e90e0.png)


###３. 回転×拡大でギャラリーのように一覧表示される画像アニメーション
![image-animation-size-rotate3 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/4ae86adf-1a28-53c9-60c4-2b53193ebd07.png)

---
##【rotate×scale】画像が回転・拡大するCSSアニメーション３選(解説あり)


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

###１.  rotate×box-shadowでリアルすぎる画像回転アニメーション
![images-rotate-animation-3picks1 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/e0d6e755-ceeb-224a-31ba-574ade98c60e.png)


###２. rotate×scale(拡大)で失敗しない画像回転アニメーション
![images-rotate-animation-3picks2 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/a4b9b381-878f-51c4-f7a4-647a89f37f49.png)


###３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション
![images-rotate-animation-3picks3 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2ddcb376-6bb1-b76b-4ea5-3cddcd0a98bd.png)

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


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

###１.  【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
![transform-rotate-flexbox-animation1-228x300 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/a42c8aeb-eba8-09da-0ff8-752d50317f61.png)


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


###３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
![transform-rotate-flexbox-animation3-275x300 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2ffbdb26-7358-be75-23aa-7a1ade21ea6e.png)

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


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

###１.  flexで２つの画像が伸縮する画像アニメーション
![flex-bigger-images-animation1-265x300 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/d4204b09-4090-8b6c-237b-ea631fe03f93.png)


###２. flexでhoverした画像が100％拡大する画像アニメーション
![flex-bigger-images-animation2-266x300 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/e60b3d9c-6589-8ed0-a8fb-2798d1877679.png)


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

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


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

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


###２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
![flexbox-justify−content-animation-image2-300x76 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/5840ec2c-3671-31ad-464b-3dfee1b4ec48.png)


###３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
![flexbox-justify−content-animation-image3-300x77 (1).png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0108ed0d-2a07-5d2a-3c31-57f1df9f6e02.png)


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

---
##【Web制作に最適】背景を重ねるCSS画像アニメーション４選


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

###１.  半分の背景が左右から現れるCSS画像アニメーション
![4picks-images-background-animation1-300x298.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/55cd825d-5cfe-c21c-e116-da700457d62b.png)


###２. 背景が両斜めから現れるCSS画像アニメーション
![4picks-images-background-animation2-287x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/2927154c-f921-3781-aed0-932be27f29a9.png)


###３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション
![4picks-images-background-animation3-282x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/ec3e20f3-825b-ac45-1b80-9457ee1cf61c.png)


###４. 半分の背景が上下から現れるCSS画像アニメーション
![4picks-images-background-animation4-300x293.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/31d07a0c-371a-daac-c961-67e92786a6d9.png)

---
##【絶対使える！】hoverで背景がなめらかに動くCSS画像アニメーション４選


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

###１.  右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション
![four-good-image-animation1-271x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/004e0029-e008-91d3-3483-4326c269ea09.png)


###２. 右端から背景がスーッと表示されるCSS画像アニメーション
![four-good-image-animation2-264x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0437fe05-e89c-66f0-7c1d-53a902ccf8cc.png)


###３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション
![four-good-image-animation3-273x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0f5a60ef-bfd9-7d2e-6d16-128ec40109cb.png)


###４. 下から背景がスーッと現れるCSS画像アニメーション
![four-good-image-animation4-300x298.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/0fdb77bb-fcab-0fea-c9dc-c022151273af.png)

---
##マウスオーバーで画像背景が切り替わるCSS【trasition】アニメーション ４選


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

###１.  マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション
![hover-image-background-change1-279x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/71146d5a-4882-8447-0987-5109c02ebe7d.png)


###２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション
![hover-image-background-change2-268x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/3f8b9b1e-bc42-ee4b-5713-29f19022044f.png)


###３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション
![hover-image-background-change3-262x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/b0f5061e-2d90-09b2-ecab-d251ed22d988.png)

###４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション
![hover-image-background-change4-295x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/94b24eae-9884-03d0-fcea-97d33c11cc31.png)

---
##transitionでCSS画像背景アニメーション３選(画像を横並びに配置)


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

###１. transitionの速度調整で画像背景が階段のように現れるアニメーション
![transition-animation-images-background1-280x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/ed19e7e3-be7e-4259-d644-1ac29035c717.png)


###２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション
![transition-animation-images-background2-260x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/446c4d75-ba6f-71fd-da14-301d3e89b324.png)


###３. 画像背景がクルクルと手裏剣のように表示されるアニメーション
![transition-animation-images-background3-282x300.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643410/8597121f-bc34-afa4-6a43-1f706efea565.png)