CSSだけで背景をふわっと自動で変えていく方法です。
コピペで出来るのでどうぞ。
画像をあえて背景（back-ground）にしたのは、中にテキストを入れやすくするためです。
CSSで背景画像3枚を自動で切り替える
■サンプル
だが断る！
■html/css
<div class="test_box01">
<p>だが断る！</p>
</div>
<style>
.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を指定 */
}
}
</style>
画像切り替えは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>
<style>
.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を指定 */
}
}
</style>
とはいえ……もっとスマートな記述にならないものか……
上の応用編で『ブラウザは左右2枚表示にして、スマホは1枚ずつ切り替えて3枚表示』の方法を記述しましたが、自分的にどうにも納得できない記述が下記の赤枠部分です……。
ブラウザは2枚画像表示なのに、どうして3枚目の画像URLを記述して、表示サイズを『0% 0%』で見えないないようにしているのか。
見せる気がないなら書かなきゃいいのに……って思いませんか？
もちろん自分も不要な記述は出来るだけ書きたくないので、最初取ってました。
しかし、下がブラウザ表示のときの背景記述に3枚目を入れていないサンプルなのですが、これをスマホ表示にすると3枚目の切り替えがandroidで上手く行きませんでした……。
ブラウザの背景CSSで記述していない3枚目に切り替わるとき、フッって途切れるのです……。
ネット環境や使用サーバー、使用するandroidにもよるみたいで、全部のandroidにその現象が起こるわけではありませんが、フッて途切れるんですよね……。
■サンプル/androidスマホで見たとき動作がオカシイ時がある。
（ネット環境や機種にもよる）
だが断る！
■html/CSS
<div class="test_box02">
<p>だが断る！</p>
</div>
<style>
.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を指定 */
}
}
</style>
………表示は上手く行っても、どうにも気に入らない記述です。
背景画像を記述しておきながら、表示サイズを『0% 0%』にするとかgoogle先生（SEO）が嫌う記述の仕方じゃないかな……という不安も残る……。
ともあれ、もっと上手い記述方法があればどなたか教えてください(笑)
直接的な解決策は見つからず、暫定の対応として、「アニメーションするとき、読み込み遅延がおきているんじゃないか？」とあたりをつけて、ブラウザ背景のCSSにも3枚目を入れたところ、スマホ表示でフッと途切れることはなくなりました。
………表示は上手く行っても、どうにも気に入らない記述です。
背景画像を記述しておきながら、表示サイズを『0% 0%』にするとかgoogle先生（SEO）が嫌う記述の仕方じゃないかな……という不安も残る……。
ともあれ、もっと上手い記述方法があればどなたか教えてください(笑)
