Go to Qiita Advent Calendar 2024 Top
LoginSignup
31
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@twinzvlog_yk(ふたご)

【Vueですぐに使える】CSS画像複数アニメーション２８選(解説付き完全オリジナルデザイン)

Last updated at Posted at 2020-07-30

スクリーンショット 2020-07-31 0.44.11.png

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

Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

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

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

###１. rotate×box-shadowでリアルすぎる画像回転アニメーション
images-rotate-animation-3picks1 (1).png

###２. rotate×scale(拡大)で失敗しない画像回転アニメーション
images-rotate-animation-3picks2 (1).png

###３. rotate×scale(拡大)×filterで想像を上回る画像回転アニメーション
images-rotate-animation-3picks3 (1).png

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

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

###１. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
transform-rotate-flexbox-animation1-228x300 (1).png

###２. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
transform-rotate-flexbox-animation2-265x300 (1).png

###３. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
transform-rotate-flexbox-animation3-275x300 (1).png

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

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

###１. flexで２つの画像が伸縮する画像アニメーション
flex-bigger-images-animation1-265x300 (1).png

###２. flexでhoverした画像が100％拡大する画像アニメーション
flex-bigger-images-animation2-266x300 (1).png

###３. filterでエフェクト＋flexで３つの画像が伸縮する画像アニメーション
flex-bigger-images-animation3-300x249 (1).png

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

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

###１. 半分の背景が左右から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
flexbox-justify−content-animation-image1-300x74 (1).png

###２. 背景が両斜めから現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
flexbox-justify−content-animation-image2-300x76 (1).png

###３. 背景が上下から現れる自動ドアのようなCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
flexbox-justify−content-animation-image3-300x77 (1).png

###４. 半分の背景が上下から現れるCSS画像アニメーションをflexboxのjustify−content：centerで中央配置
flexbox-justify−content-animation-image4-300x77 (1).png

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

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

###１. 半分の背景が左右から現れるCSS画像アニメーション
4picks-images-background-animation1-300x298.png

###２. 背景が両斜めから現れるCSS画像アニメーション
4picks-images-background-animation2-287x300.png

###３. 背景が上下から現れる自動ドアのようなCSS画像アニメーション
4picks-images-background-animation3-282x300.png

###４. 半分の背景が上下から現れるCSS画像アニメーション
4picks-images-background-animation4-300x293.png

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

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

###１. 右端から２つの背景が現れて文字が浮き出るCSS画像アニメーション
four-good-image-animation1-271x300.png

###２. 右端から背景がスーッと表示されるCSS画像アニメーション
four-good-image-animation2-264x300.png

###３. 下から２つの背景がボンっボンと画像全体を覆うCSS画像アニメーション
four-good-image-animation3-273x300.png

###４. 下から背景がスーッと現れるCSS画像アニメーション
four-good-image-animation4-300x298.png

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

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

###１. マウスオーバーで二つの背景が左端から現れる画像transitionアニメーション
hover-image-background-change1-279x300.png

###２. マウスオーバーで背景が左端から現れるシンプルな画像transitionアニメーション
hover-image-background-change2-268x300.png

###３. マウスオーバーで２つの背景が上部から落ちてくる画像transitionアニメーション
hover-image-background-change3-262x300.png

###４. マウスオーバーで背景が上部から落ちてくるシンプルな画像transitionアニメーション
hover-image-background-change4-295x300.png

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

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

###１. transitionの速度調整で画像背景が階段のように現れるアニメーション
transition-animation-images-background1-280x300.png

###２. transitionの速度調整で画像背景が上から落ちて現れるアニメーション
transition-animation-images-background2-260x300.png

###３. 画像背景がクルクルと手裏剣のように表示されるアニメーション
transition-animation-images-background3-282x300.png

31
41
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
31
41

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?