CSS文字アニメーションのサンプル集｜流れる・一文字ずつ・左から右・CSSのみ

CSSだけでも、文字が流れるアニメーション、一文字ずつ表示するアニメーション、左から右に出るテキストアニメーションを作れます。

この記事では、テキストに使いやすいCSSアニメーションをサンプル集としてまとめます。

左から右に文字を表示するアニメーション
下からふわっと表示するテキスト
流れる文字アニメーション
一文字ずつ表示するCSSアニメーション
CSSのみで作るループテキスト
文字アニメーションを作るときの注意点

基本的な transition、animation、@keyframes の考え方は、CSSアニメーションの作り方で解説しています。

CSS文字アニメーションの基本

文字アニメーションは、主に次のプロパティを組み合わせて作ります。

プロパティ	使い方
`opacity`	フェードイン、フェードアウト
`transform`	移動、拡大、回転
`animation`	自動で動かす、繰り返す
`@keyframes`	時間ごとの状態を作る
`overflow`	はみ出した文字を隠す

読みやすさを保つために、文字そのものを激しく動かしすぎないことが大切です。

左から右に文字を表示するアニメーション

まずは、文字が左から右に出てくるアニメーションです。

<p class="text-slide">左から右に表示されるテキスト</p>

.text-slide {
  opacity: 0;
  transform: translateX(-24px);
  animation: textSlide 0.7s ease forwards;
}

@keyframes textSlide {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

transform: translateX() で横方向に移動させ、opacity でふわっと表示しています。

下からふわっと表示するテキスト

見出しやキャッチコピーには、下から少し上がる動きが使いやすいです。

<h2 class="text-fade-up">ふわっと表示される見出し</h2>

.text-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: textFadeUp 0.8s ease forwards;
}

@keyframes textFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

移動距離を大きくしすぎると落ち着かない印象になるため、16px から 24px 程度がおすすめです。

流れる文字アニメーション

横に流れるテキストは、ニュースバーやお知らせのような表現に使えます。

<div class="marquee">
  <p>お知らせテキストが右から左へ流れます。</p>
</div>

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee p {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 12s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

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

white-space: nowrap; でテキストを1行にし、overflow: hidden; ではみ出した部分を隠しています。

流れる速度は、12s の数字を大きくすると遅く、小さくすると速くなります。

CSSのみで無限に流れるテキスト

途切れにくく流したい場合は、同じテキストを2つ並べます。

<div class="loop-text">
  <div class="loop-text__inner">
    <span>CSSのみで流れるテキスト</span>
    <span>CSSのみで流れるテキスト</span>
  </div>
</div>

.loop-text {
  overflow: hidden;
}

.loop-text__inner {
  display: flex;
  width: max-content;
  animation: loopText 16s linear infinite;
}

.loop-text__inner span {
  padding-right: 40px;
  white-space: nowrap;
}

@keyframes loopText {
  to {
    transform: translateX(-50%);
  }
}

同じ内容を2つ並べ、全体を半分だけ動かすことでループさせています。

一文字ずつ表示するCSSアニメーション

一文字ずつ表示するには、文字を span で分けて、それぞれに遅延を指定します。

<p class="char-animation" aria-label="HELLO">
  <span aria-hidden="true" style="--i: 0;">H</span>
  <span aria-hidden="true" style="--i: 1;">E</span>
  <span aria-hidden="true" style="--i: 2;">L</span>
  <span aria-hidden="true" style="--i: 3;">L</span>
  <span aria-hidden="true" style="--i: 4;">O</span>
</p>

.char-animation span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
  animation: charFade 0.45s ease forwards;
  animation-delay: calc(var(--i) * 0.08s);
}

@keyframes charFade {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

aria-label に元のテキストを入れ、分割した文字には aria-hidden="true" を付けています。

画面読み上げで1文字ずつ読まれにくくするためです。

日本語を一文字ずつ表示する例

日本語でも同じ考え方で作れます。

<p class="char-animation" aria-label="こんにちは">
  <span aria-hidden="true" style="--i: 0;">こ</span>
  <span aria-hidden="true" style="--i: 1;">ん</span>
  <span aria-hidden="true" style="--i: 2;">に</span>
  <span aria-hidden="true" style="--i: 3;">ち</span>
  <span aria-hidden="true" style="--i: 4;">は</span>
</p>

文字数が多い文章をすべて分割するとHTMLが読みにくくなるため、短い見出しやロゴ風テキストに向いています。

テキストをキラッと光らせるアニメーション

テキストの上を光が通るような表現は、背景を動かして作れます。

<p class="shine-text">Shine Text</p>

.shine-text {
  display: inline-block;
  color: transparent;
  background: linear-gradient(
    90deg,
    #333 0%,
    #333 35%,
    #fff 50%,
    #333 65%,
    #333 100%
  );
  background-size: 200% auto;
  background-clip: text;
  -webkit-background-clip: text;
  animation: shineText 2.4s linear infinite;
}

@keyframes shineText {
  to {
    background-position: -200% center;
  }
}

装飾として使う場合は、本文ではなく見出しや短いラベルに限定すると読みやすいです。

テキストをゆらゆら動かすアニメーション

小さな装飾テキストなら、ゆらゆらした動きも使えます。

.text-swing {
  display: inline-block;
  animation: textSwing 2s ease-in-out infinite;
}

@keyframes textSwing {
  0%,
  100% {
    transform: rotate(-2deg);
  }

  50% {
    transform: rotate(2deg);
  }
}

角度を大きくすると読みにくくなるため、文字に使う場合は小さめにします。

文字アニメーションをCSSのみで作るときの注意点

CSSのみの文字アニメーションは手軽ですが、次の点に注意します。

長い文章を動かし続けない
重要な情報をアニメーションだけに頼らない
速すぎる流れる文字は読みにくい
一文字ずつ分割する場合はアクセシビリティを考える
動きを減らす設定に対応する

特に、流れる文字だけで重要なお知らせを伝えると、読み逃しやすくなります。

大切な情報は、通常のテキストとしても読めるようにしましょう。

動きを減らす設定に対応する

アニメーションが苦手なユーザーのために、prefers-reduced-motion を使って動きを抑えます。

@media (prefers-reduced-motion: reduce) {
  .marquee p,
  .loop-text__inner,
  .char-animation span,
  .shine-text,
  .text-swing {
    animation: none;
  }
}

文字が動かなくても内容が読める状態にしておくことが大切です。

文字アニメーションが効かないときの確認ポイント

動かないときは、次の点を確認します。

@keyframes の名前と animation の名前が一致しているか
animation-duration が指定されているか
display: inline のままで transform の見え方が分かりにくくなっていないか
親要素の overflow: hidden; で文字が隠れすぎていないか
CSSの詳細度や読み込み順で上書きされていないか

transform を文字単位に使う場合は、対象に display: inline-block; を指定すると扱いやすいです。

CSSの優先順位が原因の場合は、CSS詳細度の記事を参考にしてください。

まとめ

CSS文字アニメーションは、opacity、transform、@keyframes を組み合わせると作りやすいです。

この記事のポイントをまとめます。

左から右に表示するなら translateX を使う
ふわっと表示するなら opacity と translateY を使う
流れる文字は overflow: hidden; と white-space: nowrap; を組み合わせる
一文字ずつ表示するなら span と animation-delay を使う
短い見出しや装飾に絞ると読みやすい
動きを減らす設定にも対応する

文字以外のCSSアニメーション全体を学びたい場合は、CSSアニメーションの作り方も参考にしてください。

CSS文字アニメーションの基本

左から右に文字を表示するアニメーション

下からふわっと表示するテキスト

流れる文字アニメーション

CSSのみで無限に流れるテキスト

一文字ずつ表示するCSSアニメーション

日本語を一文字ずつ表示する例

テキストをキラッと光らせるアニメーション

テキストをゆらゆら動かすアニメーション

文字アニメーションをCSSのみで作るときの注意点

動きを減らす設定に対応する

文字アニメーションが効かないときの確認ポイント

まとめ

関連記事

参考リンク

CSS文字アニメーションの基本

左から右に文字を表示するアニメーション

下からふわっと表示するテキスト

流れる文字アニメーション

CSSのみで無限に流れるテキスト

一文字ずつ表示するCSSアニメーション

日本語を一文字ずつ表示する例

テキストをキラッと光らせるアニメーション

テキストをゆらゆら動かすアニメーション

文字アニメーションをCSSのみで作るときの注意点

動きを減らす設定に対応する

文字アニメーションが効かないときの確認ポイント

まとめ

関連記事

参考リンク

あわせて読みたい記事

z-indexが効かない原因と直し方｜重なり順・position・stacking context

CSSサイドバー付き2カラムレイアウトの作り方

CSS文字装飾集｜マーカー線・下線・縁取り・グラデーション文字

CSSテーブルデザイン集｜見やすい表とスマホ対応の作り方