MENU
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
週末のトモゾウ
  • 資格関連
  • SEO
  • WordPress
  • HTML/CSS
  • 雑記
  1. ホーム
  2. HTML/CSS
  3. 複数の背景画像(background-img)を自動的に切り替えるCSSアニメーション

複数の背景画像(background-img)を自動的に切り替えるCSSアニメーション

2023 3/12
HTML/CSS
2022年12月29日2023年3月12日
当ページのリンクには広告が含まれています。

CSSだけで背景をふわっと自動で変えていく方法です。
コピペで出来るのでどうぞ。
画像をあえて背景(back-ground)にしたのは、中にテキストを入れやすくするためです。

(プラス、自分にきた依頼内容的にback-groundにしか画像を敷けなかったから……)

目次

CSSで背景画像3枚を自動で切り替える

■サンプル

だが断る!

■html/css

<div class="test_box01">
    <p>だが断る!</p>
</div>
 .test_box01{
        width:100%;
        max-width: 800px;
        height: 400px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-size: cover;
          animation: img_anime 16s ease infinite;
    }
    .test_box01 p{
      color: #FFF;
      font-size: 40px;
    }
      /* アニメーション */
      @keyframes img_anime {
          0% {
          background-image: url(./wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
          }
          20% {
          background-image: url(./wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
              }
          35% {
          background-image: url(./wp-content/uploads/2022/12/cat2.jpg); /* 背景画像2を指定 */
              }
          53% {
          background-image: url(./wp-content/uploads/2022/12/cat2.jpg); /* 背景画像2を指定 */
              }
          68% {
          background-image: url(./wp-content/uploads/2022/12/cat3.jpg); /* 背景画像3を指定 */
              }
          85% {
          background-image: url(./wp-content/uploads/2022/12/cat3.jpg); /* 背景画像3を指定 */
              }
          100% {
          background-image: url(./wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
              }
          } 

画像切り替えはCSSの「@keyframes img_anime」の部分にある〇〇%で制御しています。

「animation: img_anime 16s ease infinite;」で記述している16sが16秒ということで、16秒のうち何%~何%までをどの画像を表示するか決めています。
同じ背景画像を連続で記述しているのは、次々切り替わるとしっかり画像を見せれないため、画像停止時間として重複させてます。

次々に変わっていいのであれば、重複部分は消してください。

応用編|パソコンは左右2枚背景画像で、スマホは1枚ずつ切り替え(3枚)

パソコンとスマホで画像の見せ方を変えることも可能です。
例えばパソコンでは画像が大きく見えるから左右2枚表示にして、スマホは画面が小さいから一枚ずつアニメーションで切り替えも出来ます。

■サンプル

ブラウザ幅が601px以上の時は背景画像が左右2枚表示されますが、600px以下になると背景画像は1枚になり自動で切り替わります。
(スマホで見ている方は、スマホを横にするとアニメーション無しの2枚表示になります)

だが断る!

■html/css

<div class="test_box">
      <p>だが断る!</p>
  </div>
.test_box{
          width:100%;
          max-width: 800px;
          height: 250px;
            background: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat1.jpg.webp),
                        url(https://webkatsudou.com/wp-content/uploads/2022/12/cat2.jpg),
                        url(https://webkatsudou.com/wp-content/uploads/2022/12/cat3.jpg);
            background-repeat:no-repeat, no-repeat, no-repeat;
            background-position:left top,right top,0% 0%;
            background-size: 50% auto;
            display: flex;
            justify-content: center;
            align-items: center;
      }
      .test_box p{
        color: #FFF;
        font-size: 40px;
      }

    @media screen and (max-width: 600px){
        .test_box {
            width: 100%;
            background-size: cover;
            animation: img_anime 16s ease infinite;
        }
    }
        /* スマホ表示アニメーション */
        @keyframes img_anime {
            0% {
            background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
            }
            20% {
            background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
                }
            35% {
            background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat2.jpg); /* 背景画像2を指定 */
                }
            53% {
            background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat2.jpg); /* 背景画像2を指定 */
                }
            68% {
            background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat3.jpg); /* 背景画像3を指定 */
                }
            85% {
            background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat3.jpg); /* 背景画像3を指定 */
                }
            100% {
            background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
                }
            } 

パソコンでも画像を3枚とも見せたいのであれば

        background-position:left top,right top,0% 0%;
        background-size: 50% auto;

この部分を調整して3枚並べてみるのもいいです。

とはいえ……もっとスマートな記述にならないものか……

上の応用編で『ブラウザは左右2枚表示にして、スマホは1枚ずつ切り替えて3枚表示』の方法を記述しましたが、自分的にどうにも納得できない記述が下記の赤枠部分です……。

ブラウザは2枚画像表示なのに、どうして3枚目の画像URLを記述しているのか。
見せる気がないなら書かなきゃいいのに……って思いませんか?
もちろん自分も不要な記述は出来るだけ書きたくないので、最初取ってました。

しかし、下がブラウザ表示のときの背景記述に3枚目を入れていないサンプルなのですが、これをスマホ表示にすると3枚目の切り替えがandroidで上手く行きませんでした……。
ブラウザの背景CSSで記述していない3枚目に切り替わるとき、スマホ表示がフッって途切れるのです……。

ネット環境や使用サーバー、使用するandroidにもよるみたいで、全部のandroidにその現象が起こるわけではありませんが、フッて途切れるんですよね……。

■サンプル/androidスマホで見たとき動作がオカシイ時がある。
(ネット環境や機種にもよる)

だが断る!

■html/CSS

<div class="test_box02">
      <p>だが断る!</p>
  </div>
  .test_box02{
        width:100%;
        max-width: 800px;
        height: 250px;
          background: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat1.jpg.webp),
                      url(https://webkatsudou.com/wp-content/uploads/2022/12/cat2.jpg),
          background-repeat:no-repeat, no-repeat;
          background-position:left top,right top;
          background-size: 50% auto;
          display: flex;
          justify-content: center;
          align-items: center;
    }
    .test_box02 p{
      color: #FFF;
      font-size: 40px;
    }

  @media screen and (max-width: 600px){
      .test_box02 {
          width: 100%;
          background-size: cover;
          animation: img02_anime 16s ease infinite;
      }
  }
      /* スマホ表示アニメーション */
      @keyframes img02_anime {
          0% {
          background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
          }
          20% {
          background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
              }
          35% {
          background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat2.jpg); /* 背景画像2を指定 */
              }
          53% {
          background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat2.jpg); /* 背景画像2を指定 */
              }
          68% {
          background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat3.jpg); /* 背景画像3を指定 */
              }
          85% {
          background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat3.jpg); /* 背景画像3を指定 */
              }
          100% {
          background-image: url(https://webkatsudou.com/wp-content/uploads/2022/12/cat1.jpg.webp); /* 背景画像1を指定 */
              }
          } 

………表示は上手く行っても、どうにも気に入らない記述です。

背景画像を記述しておきながら、表示ポジションを『0% 0%』にするとかgoogle先生(SEO)が嫌う記述の仕方じゃないかな……という不安も残る……。

直接的な解決策は思いつきませんでしたが、応急策として『原因は画像の読み込み遅延が発生しているんじゃないか?』とあたりをつけてブラウザに3枚目を記述したところ、スマホでフッと途切れることはなくなりました。

ともあれ、もっと上手い記述方法があればどなたか教えてください(笑)

あわせて読みたい
要素がスクロールして画面に表示されたらCSSアニメーションを動かす方法【jQueryコピペ】 ページを開くと同時に、すべてのアニメーションが発火するのではなく、スクロールして目的の部分が表示されたらアニメーション動くjQueryのやり方です。コピペで使えま…
HTML/CSS
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
  • 履歴書にも書けちゃう??面白い資格25選!!
  • 花粉症から逃げよう!花粉のない避粉地に行こう!

この記事を書いた人

tomoのアバター tomo

資格試験やSEOなどについての情報を発信します。現在も資格試験や検定にチャレンジ中!実際に資格を勉強した上で、おススメの勉強方法や講義動画チャンネル、過去問サイトを紹介してます!
(仕事はWEBデザインとWEBマーケ)

この著者の記事一覧へ

関連記事

  • linear-gradient()の使い方まとめ。グラデーションアニメや装飾にも使える
    2023年4月3日
  • おしゃれなCSSポイント見出しデザイン!簡単コピペで現場ですぐに使える!
    2023年3月19日
  • イグアナ
    【JQuery】imgタグのsrcとdata-srcを画像書き換えて遅延読み込みさせる|ページスピード改善
    2023年3月12日
  • 要素がスクロールして画面に表示されたらCSSアニメーションを動かす方法【jQueryコピペ】
    2023年2月18日
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
目次
トモゾウ
埼玉在住でWEBデザイン(フロントエンドエンジニア)の仕事をしながら、いろんな資格試験に挑戦しています。

また、本業とは別にブログを運営してます。資格勉強で学んだことや、WEB(SEO/HTML/CSSなど)を発信中。
About
カテゴリー
  • HTML/CSS
  • SEO
  • WordPress
  • ガジェット
  • 副業・ポイ活
  • 資格関連
  • 雑記
検索
当ブログは「SWELL」を使用しています。
  • サイトマップ
  • プライバシーポリシー
  • お問い合わせ

© 2023 週末のトモゾウ

目次