ミギムキ

[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>

仕組み、解説、補足など

スポンサー広告