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

公開日:2018/10/05 更新日:2018/10/10

やりたいこと

画面幅いっぱいの背景画像を徐々にスライドさせていくアニメーションがあります
左端に見切れた部分が右端から現れて、くるくるループしておもしろかっこいい動きです
サイトの印象をバシッと伝えたいファーストビューなどに使うと目も引きますし、ユーザーに操作をさせずに商品のラインナップなどをアピールできます
このような動きを実現するjQueryのプラグインなどがありますが、今回は、CSSのみを使って実装するコードを作成しました

サンプルコード

CSS

.bg_loop {
    position: relative;
    padding-top: 17%;
    width; 100vw;
    height: 0px;
    overflow: hidden;
}
.bg_loop::before,
.bg_loop::after {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    z-index: -1;
    background-image: url("./images/bg.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    content: "";
}
.bg_loop::before {
    animation: loop_1 50s linear infinite;
}
.bg_loop::after {
    left: -1px;
    right: 1px;
    animation: loop_2 50s linear infinite;
}
@keyframes loop_1 {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-100%);
    }
}
@keyframes loop_2 {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}

html

<div class="bg_loop">
    <!-- コンテンツ -->
</div>

仕組み、解説、補足など

height、padding-topは、使用する画像や背景の上に文字などを載せるかなど、用途に応じて設定してください
あくまで単なる背景として使用するなら（中に文字や画像を入れて高さが確保されるなら）、heightもpadding-topも不要です
背景画像の縦横比をきちんと維持したい場合は、padding-topに「画像の高さ / 画像の幅」の%を設定してください

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

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

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