CSSだけでテキストが無限に流れるアニメーションを実装する方法

公開日: 2024.11.26
最終更新日: 2026.07.17

Webサイトでよく見かける、テキストが左右に無限に流れ続けるアニメーション。ページのアクセントとして人気の演出です。

結論から言うと、この「流れるテキスト」はCSSだけで実装できます。JavaScriptは不要で、テキストを複製し、@keyframesで横方向に移動させるだけです。この記事では、そのHTMLとCSS、仕組みのポイントを解説します。

1 デモ
2 HTML
3 CSS
4 仕組みのポイント
5 まとめ

デモ

まずはデモをご覧ください。

HTML

<div class="flowing-ttl">
    <div class="flowing-ttl__item">FLOWING FROM RIGHT TO LEFT</div>
    <div class="flowing-ttl__item">FLOWING FROM RIGHT TO LEFT</div>
    <div class="flowing-ttl__item">FLOWING FROM RIGHT TO LEFT</div>
    <div class="flowing-ttl__item">FLOWING FROM RIGHT TO LEFT</div>
    <div class="flowing-ttl__item">FLOWING FROM RIGHT TO LEFT</div>
</div>
<div class="flowing-ttl reverse">
    <div class="flowing-ttl__item">FLOWING FROM LEFT TO RIGHT</div>
    <div class="flowing-ttl__item">FLOWING FROM LEFT TO RIGHT</div>
    <div class="flowing-ttl__item">FLOWING FROM LEFT TO RIGHT</div>
    <div class="flowing-ttl__item">FLOWING FROM LEFT TO RIGHT</div>
    <div class="flowing-ttl__item">FLOWING FROM LEFT TO RIGHT</div>
</div>

ポイントは、.flowing-ttl__itemを複数回コピペしている点です。少なくとも、ブラウザの画面幅が埋まるくらいの数を複製してください。流れて途切れる隙間を作らないために、余裕をもって並べておくのがコツです。

CSS

.flowing-ttl {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.flowing-ttl__item {
  flex: 0 0 auto;
  white-space: nowrap;
  padding: 0 15px;
}

.flowing-ttl__item:nth-child(odd) {
  animation: loop 40s linear -20s infinite;
}

.flowing-ttl__item:nth-child(even) {
  animation: loop2 40s linear infinite;
}

.flowing-ttl.reverse .flowing-ttl__item:nth-child(odd) {
  animation: loop 40s linear -20s infinite reverse;
}

.flowing-ttl.reverse .flowing-ttl__item:nth-child(even) {
  animation: loop2 40s linear infinite reverse;
}

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

  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }

  to {
    transform: translateX(-200%);
  }
}

仕組みのポイント

複製した.flowing-ttl__itemの、奇数番目（odd）と偶数番目（even）でアニメーションのタイミングをずらしているのが最大のポイントです。奇数番目には開始を早める負のディレイ（-20s）を指定し、偶数番目とタイミングを半分ずらすことで、テキストが途切れず、隙間なく流れ続けているように見せています。

親要素のoverflow: hiddenで、画面外に出たテキストを隠しているのも重要です。これにより、translateXで移動したテキストがはみ出さず、きれいに流れて見えます。white-space: nowrapは、テキストが途中で折り返されないようにするための指定です。

流れる速度を変えたいときは、animationの40sの部分を調整します。数値を大きくするとゆっくり、小さくすると速く流れます。reverseクラスを付けた行は逆方向に流れるので、上下で流れる向きを変えると、動きに変化が出ておしゃれに仕上がります。

loopとloop2の2つの@keyframesを使い分けている点も見どころです。loopはtranslateX(100%)から-100%へ、loop2は0から-200%へと移動します。開始位置と移動量の異なる2つのアニメーションを奇数・偶数で交互に当てることで、要素同士がつながって途切れなく流れているように見せています。

文字の色・サイズ・フォントは.flowing-ttl__itemに自由に指定できます。英字だけでなく日本語でも同じ仕組みで流せるので、キャッチコピーやブランド名を流す使い方もおすすめです。

1点、アクセシビリティの補足です。動き続けるアニメーションが苦手なユーザーもいるため、@media (prefers-reduced-motion: reduce)で「動きを減らす」設定の環境ではアニメーションを止める配慮を加えると、より親切な実装になります。