横流しテキスト

同じテキストをたくさん置いて、外側のdivでflexで横並びにし、テキスト単体を横にずらし続けます。
テキストがはみ出しても折り返さないように

 white-space: nowrap;
  overflow: hidden;

を適用します。

テキスト1ブロック（span）間の余白はspanのpaddingで確保する。

秒数と長さが合わないと流れの端が見えてしまい、途切れるようになる場合があります。適宜調整ください。特にレスポンシブの場合、pcで画面幅が大きくなると端が見えてしまいがち。
※今回はどこまで流れたのかわかりやすくするために1,2,3と番号をふっていますが、本来はふらずに同じ内容のテキストが繰り返される想定です。

@keyframes flowToLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}


@keyframes flowToRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}


.wrap {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  font-size: 40px;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: bold;
  & + & {
    margin-top: 50px;
  }
  span {
    padding: 0 10px; // gapでもできるがこのほうが切り替わりが安定する
    animation: flowToLeft 20s linear infinite;
    background: linear-gradient(to right, pink, purple);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  &.-en {
    font-size: 50px;
    span {
      background: linear-gradient(to right, lightgreen, skyblue);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: flowToRight 15s linear infinite;
    }
  }
}