CSSで、背景画像の自動ループ（横スライド）

イメージ

コード

index.html

<div class = "l-index">
</div>

index.css

.l-index{
  background-image: url(../../img/about_back.jpeg);
  background-size: 50vw 100vh;
  animation: bgscroll 20s linear infinite;
  height: 100vh;
}

@-webkit-keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 50vw 0;}
 }

 @keyframes bgscroll {
  0% {background-position: 0 0;}
  100% {background-position: 50vw 0;}
 }

参考