CSSアニメーションで画像を横スクロール無限ループさせます。まずhtmlのコードです。同じ画像を2つ配置して、クラス名loop_wrapのdivタグで囲います。

<div class="loop_wrap">
	<img src="images/loop.jpg" alt=""><img src="images/loop.jpg" alt="">
</div>

次にCSSのコードです。loop_wrapのdivタグにdisplay: flexを指定して画像を横並びにします。また、overflow: hiddenを指定してdivタグをはみ出す部分は非表示にします。

CSSアニメーションは1つ目の画像と2つ目の画像で、それぞれ分けて指定します。animationプロパティでショートハンドで指定しています。

■1つ目の画像
animation-name: loop　アニメーションの名前を指定
animation-duration: 120s　アニメーション開始から終了までの所要時間
animation-timing-function: linear　アニメーションのイージングを指定
animation-delay: -60s　アニメーションが開始するまでの遅延時間
animation-iteration-count: infinite　アニメーションのループ回数を指定

■2つ目の画像
animation-name: loop2　アニメーションの名前を指定
animation-duration: 120s　アニメーション開始から終了までの所要時間
animation-timing-function: linear　アニメーションのイージングを指定
animation-iteration-count: infinite　アニメーションのループ回数を指定

.loop_wrap{
	display: flex;
	overflow: hidden;
}
.loop_wrap img:first-child {
	animation: loop 120s linear -60s infinite;
}
.loop_wrap img:last-child {
	animation: loop2 120s linear infinite;
}
@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}

ポイントは1つ目の画像だけanimation-delay: -60sを指定している個所です。animation-duration: 120sの半分の秒数です。animation-delayでマイナス値を指定した場合、変化はすぐに始まりますが指定した秒数だけアニメーションが進んだ状態で開始されます。つまり初回だけアニメーションを60秒進めて画像の初期位置を調整しています。2回目以降のアニメーションにanimation-delayは適用されません。これで1つ目の画像の後に2つ目の画像がつながって無限ループするアニメーションになります。