css

/* Marqueeアニメーションの仕組み
 * 
 * このアニメーションが途切れ目なく動作する理由：
 * 1. background-size: 2848px - 背景画像の幅を2848pxに設定(画面幅以上の横長の画像)
 * 2. background-repeat: repeat-x - 画像を横方向に無限に繰り返し
 * 3. アニメーションで画像を左に2848px（画像1枚分）移動
 * 
 * 動作の流れ：
 * - 0%: 画像は初期位置（0, 0）
 * - 100%: 画像は左に2848px移動（-2848px, 0）
 * - repeat-xにより、移動で空いた右側に同じ画像が表示される
 * - 1枚分移動した時点で視覚的に初期状態と同じになる
 */
.marquee {
  width: 100%;
  height: 72px;
  background-image: url("/assets/images/marquee.svg");
  background-repeat: repeat-x;
  background-size: 2848px 72px;
  background-color: black;
}
.marquee-left {
  animation: marquee-from-left 3s linear infinite;
}
.marquee-right {
  animation: marquee-from-right 3s linear infinite;
}

@keyframes marquee-from-left {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -2848px 0;
  }
}
@keyframes marquee-from-right {
  0% {
    background-position: -2848px 0;
  }
  100% {
    background-position: 0 0;
  }
}

html

<div class="marquee marquee-left"></div>
<div class="marquee marquee-right"></div>