【ただの自己満】初心者向けの使えそうなCSS画像アニメーション３１選

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

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

Webデザイナーに興味のある方はこちらも合わせてどうぞ↓

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

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

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

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

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

コードを確認する

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

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

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

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

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

コードを確認する

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

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

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

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

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

コードを確認する

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

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

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

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

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

コードを確認する

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

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

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

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

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

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

コードを確認する

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

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

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

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

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

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

コードを確認する

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

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

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

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

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

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

コードを確認する

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

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

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

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

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

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

コードを確認する

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

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

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

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

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

コードを確認する