[CSS] 複数枚の背景画像を無限ループでスライドアニメーションさせたい

公開日:2018/10/13 更新日:2020/03/01

やりたいこと

こちらの記事で背景画像の無限ループさせるやり方を取り上げました
このやり方では、例えば4枚の写真を繋げて作った背景画像をループさせると、画面の横幅によっては背景画像が収まりきらない、ということが起きてしまいます
これでは商品のサンプル画像をさりげなく背景でループさせる、というような使い方ができないということで改めて考え直してみました
レスポンシブにも対応させて、パソコン表示のときは4枚分、タブレット表示のときは2枚分、モバイル表示のときは1枚分表示するように切り替えます

サンプルコード

.bg_loop {
    position: relative;
    width; 100vw;
    overflow: hidden;
}
.bg_loop::before,
.bg_loop::after {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
    width: 400vw;
    height: 100%;
    background-image:
        url("./images/bg_01.jpg"),
        url("./images/bg_02.jpg"),
        url("./images/bg_03.jpg"),
        url("./images/bg_04.jpg");
    background-repeat: no-repeat;
    background-position:
        top 0px left 0vw,
        top 0px left 100vw,
        top 0px left 200vw,
        top 0px left 300vw;
    background-size: calc(100vw + 1px) 100%;
    content: "";
}
.bg_loop::before {
    animation: loop_400vw_1 50s linear infinite;
}
.bg_loop::after {
    left: -1px;
    right: 1px;
    animation: loop_400vw_2 50s linear infinite;
}
@media print, (min-width: 992px) {
    .bg_loop::before,
    .bg_loop::after {
        position: absolute;
        width: 200vw;
        background-position:
            top 0px left 0vw,
            top 0px left 50vw,
            top 0px left 100vw,
            top 0px left 150vw;
        background-size: calc(50vw + 1px) 100%;
    }
    .bg_loop::before {
        animation: loop_200vw_1 50s linear infinite;
    }
    .bg_loop::after {
        animation: loop_200vw_2 50s linear infinite;
    }
}
@media print, (min-width: 1200px) {
    .bg_loop::before,
    .bg_loop::after {
        position: absolute;
        width: 100vw;
        background-position:
            top 0px left 0vw,
            top 0px left 25vw,
            top 0px left 50vw,
            top 0px left 75vw;
        background-size: calc(25vw + 1px) 100%;
    }
    .bg_loop::before {
        animation: loop_100vw_1 50s linear infinite;
    }
    .bg_loop::after {
        animation: loop_100vw_2 50s linear infinite;
    }
}
@keyframes loop_400vw_1 {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-400vw);
    }
}
@keyframes loop_400vw_2 {
    0% {
        transform: translateX(400vw);
    }
    100% {
        transform: translateX(0vw);
    }
}
@keyframes loop_200vw_1 {
    0% {
        transform: translateX(0vw);
    }
    100% {
        transform: translateX(-200vw);
    }
}
@keyframes loop_200vw_2 {
    0% {
        transform: translateX(200vw);
    }
    100% {
        transform: translateX(0vw);
    }
}
@keyframes loop_100vw_1 {
    0% {
        transform: translateX(0vw);
    }
    100% {
        transform: translateX(-100vw);
    }
}
@keyframes loop_100vw_2 {
    0% {
        transform: translateX(100vw);
    }
    100% {
        transform: translateX(0vw);
    }
}

仕組み、解説、補足など

IEの場合、同じ名前のキーフレームをメディアクエリで切り替えて使うことができません（最初に指定されたキーフレームの動作しかしない）
そこで、各端末別のキーフレームを別名で定義し、アニメーションのキーフレーム指定部分をメディアクエリで切り替えています
画像を増やす場合は、擬似要素のwidthとアニメーションの移動量を調整してください

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。