Help us understand the problem. What is going on with this article?

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

スクリーンショット 2020-08-10 16.07.33.png

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

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


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

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

1. hoverで回転×拡大する画像アニメーション

image-animation-size-rotate1 (1).png

2. hover前後でサイズが拡大・縮小×回転する画像アニメーション

image-animation-size-rotate2 (1).png

3. 回転×拡大でギャラリーのように一覧表示される画像アニメーション

image-animation-size-rotate3 (1).png


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

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

1. rotate×box-shadowでリアルすぎる画像回転アニメーション

images-rotate-animation-3picks1 (1).png

2. rotate×scale(拡大)で失敗しない画像回転アニメーション

images-rotate-animation-3picks2 (1).png

3. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション

images-rotate-animation-3picks3 (1).png


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

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

1. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation1-228x300 (1).png

2. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation2-265x300 (1).png

3. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション

transform-rotate-flexbox-animation3-275x300 (1).png


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

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

1. flexで2つの画像が伸縮する画像アニメーション

flex-bigger-images-animation1-265x300 (1).png

2. flexでhoverした画像が100%拡大する画像アニメーション

flex-bigger-images-animation2-266x300 (1).png

3. filterでエフェクト+flexで3つの画像が伸縮する画像アニメーション

flex-bigger-images-animation3-300x249 (1).png


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

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

1. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置

flexbox-justify−content-animation-image1-300x74 (1).png

2. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置

flexbox-justify−content-animation-image2-300x76 (1).png

3. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content:centerで中央配置

flexbox-justify−content-animation-image3-300x77 (1).png

4. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content:centerで中央配置

flexbox-justify−content-animation-image4-300x77 (1).png


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

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

1. 半分の背景が左右から現れるCSS画像アニメーション

4picks-images-background-animation1-300x298.png

2. 背景が両斜めから現れるCSS画像アニメーション

4picks-images-background-animation2-287x300.png

3. 背景が上下から現れる自動ドアのようなCSS画像アニメーション

4picks-images-background-animation3-282x300.png

4. 半分の背景が上下から現れるCSS画像アニメーション

4picks-images-background-animation4-300x293.png


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

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

1. 右端から2つの背景が現れて文字が浮き出るCSS画像アニメーション

four-good-image-animation1-271x300.png

2. 右端から背景がスーッと表示されるCSS画像アニメーション

four-good-image-animation2-264x300.png

3. 下から2つの背景がボンっボンと画像全体を覆うCSS画像アニメーション

four-good-image-animation3-273x300.png

4. 下から背景がスーッと現れるCSS画像アニメーション

four-good-image-animation4-300x298.png


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

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

1. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション

hover-image-background-change1-279x300.png

2. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション

hover-image-background-change2-268x300.png

3. マウスオーバーで2つの背景が上部から落ちてくる画像transitionアニメーション

hover-image-background-change3-262x300.png

4. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション

hover-image-background-change4-295x300.png


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

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

1. transitionの速度調整で画像背景が階段のように現れるアニメーション

transition-animation-images-background1-280x300.png

2. transitionの速度調整で画像背景が上から落ちて現れるアニメーション

transition-animation-images-background2-260x300.png

3. 画像背景がクルクルと手裏剣のように表示されるアニメーション

transition-animation-images-background3-282x300.png

twinzvlog_yk
フロントエンドメイン/Vue.js/CSS/気に入ったら使ってください/批判反論その他心ない行為を発見した場合は即座にブロックします/ コピペOKのフロントエンド素材をみたい方は👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇👇
https://www.twinzlabo.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away