横並びにした画像を横スクロールでループさせます。

右から左に流れる

DEMO

HTML

CSSのみで実装しているので、スクロールさせたい画像のリストを2回書いています。

<div class="marquee-right">
	<ul>
		<li><img src="https://placehold.jp/450x450.png?text=1"></li>
		<li><img src="https://placehold.jp/450x450.png?text=2"></li>
		<li><img src="https://placehold.jp/450x450.png?text=3"></li>
		<li><img src="https://placehold.jp/450x450.png?text=1"></li>
		<li><img src="https://placehold.jp/450x450.png?text=2"></li>
		<li><img src="https://placehold.jp/450x450.png?text=3"></li>
	</ul>
</div>

CSS

translateXの位置で流れる方向を調整しています。

.marquee-right {
	overflow: hidden;
}
.marquee-right ul {
	animation: marquee-right 20s linear infinite;
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-right ul li {
	list-style: none;
	padding: 0 5px;
	width: calc(100vw / 3 - 10px);
}
.marquee-right img {
	display: block;
	width: 100%;
}
@keyframes marquee-right {
	from {
		transform: translateX(0%);
	}
	to {
		transform: translateX(-50%);
	}
}

左から右に流れる

DEMO

HTML

CSSのみで実装しているので、スクロールさせたい画像のリストを2回書いています。

<div class="marquee-left">
	<ul>
		<li><img src="https://placehold.jp/450x450.png?text=1"></li>
		<li><img src="https://placehold.jp/450x450.png?text=2"></li>
		<li><img src="https://placehold.jp/450x450.png?text=3"></li>
		<li><img src="https://placehold.jp/450x450.png?text=1"></li>
		<li><img src="https://placehold.jp/450x450.png?text=2"></li>
		<li><img src="https://placehold.jp/450x450.png?text=3"></li>
	</ul>
</div>

CSS

.marquee-left {
	overflow: hidden;
}
.marquee-left ul {
	animation: marquee-left 20s linear infinite;
	display: flex;
	margin: 0;
	padding: 0;
	width: max-content;
}
.marquee-left ul li {
	list-style: none;
	padding: 0 5px;
	width: calc(100vw / 3 - 10px);
}
.marquee-left img {
	display: block;
	width: 100%;
}
@keyframes marquee-left {
	from {
		transform: translateX(-50%);
	}
	to {
		transform: translateX(0%);
	}
}

translateXの位置で流れる方向を調整しています。

今回は2回画像リストを並べているので、translateXの値を50%にしています。
3回並べる場合は33.3%…など数値は適宜変更してください。