ミギムキ

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

やりたいこと

サンプルコード

.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); } }
スポンサー広告

仕組み、解説、補足など