こんにちは、アンドレです。

最近テキストや画像を無限ループで流すデザインが多いのですが、要領を知らないとやや苦戦すると思うので、今回は（HTMLと）CSSのみで無限ループを実装するやり方をご紹介します。

まず、完成品は以下です。

See the Pen 無限ループ by Takamasa Okada (@NP-okada) on CodePen.

次に、原理について図でご説明します。

上記のようにすることで、シームレスに無限ループしているように見えます。

大事なポイントは、
ループする1セットの1つめの要素が画面から見切れていること（＝2つめが画面外にあること）
です。
そうしないと、1つめを初期位置に戻す前に、画面幅に足りない部分が切れて見えてしまいます。
画面幅はユーザーの閲覧環境によって変わりうるため、想定する最大の画面幅を決めておき、その画面幅でも見切れるようにしておくか、JSを使って画面幅に応じて要素を増やすなどするとよいでしょう。

他に留意すべき点として、流れるスピードはループする1セットの幅に依存するので、その幅が可変の場合はそれに応じてanimation-durationを調整する必要があります。
例えばdurationを10sにしたとして、ループする1セットの幅が1000pxだったら1000/10=100px/sですが、2000pxだったら2000/10=200px/sとなり、2倍の速さで流れることになってしまいます。
そのような場合は、ループする1セットの幅をJSでCSSカスタムプロパティ（インラインスタイル）に入れてCSSで受け取るようにし、その値（幅）を1秒あたりに進むpx数で割った値（＝何秒かかるか）をdurationに指定するとよいでしょう。
また、アクセシビリティを考慮すると、無限ループのためだけに入れている（複製している）ものは、aria-hidden属性を付けておくとよいと思います。

以上です。
原理的にシンプルなため、調整等もしやすいと思いますので、機会があればぜひ参考にしていただければ幸いです。

それでは、また。