背景画像を横にスクロールさせたい CSS animation＜レスポンシブ/要素に対して全画面＞

一部の要素で背景画像を全幅でループさせたい場合のスタイルシート。

※「bg-image-loop」、「bgscroll」は任意。

.bg-image-loop {
    position: relative;
    background-image: url(背景画像);
    background-repeat: repeat-x;
    background-size: cover;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    -webkit-animation: bgscroll 120s linear infinite;
    animation: bgscroll 120s linear infinite;
}

@-webkit-keyframes bgscroll { 0% {background-position: 0 0;} 100% {background-position: -2000px 0;}}/* 2000px使用した背景画像の横幅 */
@keyframes bgscroll { 0% {background-position: 0 0;} 100% {background-position: -2000px 0 ;}}

.bg-image-loop {

position: relative;

background-image: url(背景画像);

background-repeat: repeat-x;

background-size: cover;

width: 100vw;

height: 100vh;

margin: 0;

padding: 0;

-webkit-animation: bgscroll 120s linear infinite;

animation: bgscroll 120s linear infinite;

}

@-webkit-keyframes bgscroll { 0% {background-position: 0 0;} 100% {background-position: -2000px 0;}}/* 2000px使用した背景画像の横幅 */

@keyframes bgscroll { 0% {background-position: 0 0;} 100% {background-position: -2000px 0 ;}}

@keyframes bgscroll　の指定が無いと動きません。