左右に流れ続けるテキストアニメーション

はじめに

左から右、右から左に無限に流れるテキストアニメーションを実装していきます。
CSSだけで簡単に実装できるのでおすすめです。

デモ

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

HTML

<div class="flowing-ttl">
    <div class="flowing-ttl__item">FLOWING FLOM RIGHT TO LEFT</div>
    <div class="flowing-ttl__item">FLOWING FLOM RIGHT TO LEFT</div>
    <div class="flowing-ttl__item">FLOWING FLOM RIGHT TO LEFT</div>
    <div class="flowing-ttl__item">FLOWING FLOM RIGHT TO LEFT</div>
    <div class="flowing-ttl__item">FLOWING FLOM RIGHT TO LEFT</div>
</div>
<div class="flowing-ttl reverse">
    <div class="flowing-ttl__item">FLOWING FLOM LEFT TO RIGHT</div>
    <div class="flowing-ttl__item">FLOWING FLOM LEFT TO RIGHT</div>
    <div class="flowing-ttl__item">FLOWING FLOM LEFT TO RIGHT</div>
    <div class="flowing-ttl__item">FLOWING FLOM LEFT TO RIGHT</div>
    <div class="flowing-ttl__item">FLOWING FLOM 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）でタイミングをずらしてアニメーション設定しています。

IPPEI FUKUTA

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。