タイピングアニメーション実装解説｜Typing Animation CSS / JS Guide

2026年5月6日

タイピングアニメーションデザイン見本

テキストが1文字ずつ打ち込まれる「タイプライター効果」の実装パターンを紹介します。JavaScriptによる動的制御とCSSアニメーションのみでの実装、両方のコピペ用コードを掲載しています。

① 基本 — タイプライター効果（JS）

HTML

<div class="typewriter">
  <span class="typed-text"></span><span class="ty-cursor">|</span>
</div>

CSS

.typewriter {
  font-family: monospace;
  font-size: 1.4rem;
  color: #333;
}

.ty-cursor {
  display: inline-block;
  color: #7c3aed;
  animation: ty-cursor-blink 0.7s step-end infinite;
}

@keyframes ty-cursor-blink {
  50% { opacity: 0; }
}

(function () {
  var txt = 'Hello, World!';
  var pos = 0;
  var speed = 60;
  var el = document.querySelector('.typed-text');

  function typeNext() {
    if (pos < txt.length) {
      el.textContent = txt.slice(0, pos + 1);
      pos++;
      setTimeout(typeNext, speed);
    }
  }

  typeNext();
})();

slice() と setTimeout() で1文字ずつ表示

slice(0, pos + 1) で文字列の先頭から少しずつ切り出し、setTimeout() で再帰呼び出しすることで1文字ずつ打ち込む演出を実現します。カーソル（|）はCSSの @keyframes で点滅させます。スピードは speed の値（ミリ秒）を変えるだけで調整できます。

② 複数テキストのループ

HTML

<div class="typewriter">
  <span class="typed-text"></span><span class="ty-cursor">|</span>
</div>

CSS

.typewriter {
  font-family: monospace;
  font-size: 1.4rem;
  color: #333;
}

.ty-cursor {
  display: inline-block;
  color: #7c3aed;
  animation: ty-cursor-blink 0.7s step-end infinite;
}

@keyframes ty-cursor-blink {
  50% { opacity: 0; }
}

(function () {
  var phrases = ['Web Designer', 'Frontend Engineer', 'UI Creator'];
  var phrasePos = 0;
  var charPos = 0;
  var isDeleting = false;
  var el = document.querySelector('.typed-text');

  function loop() {
    var full = phrases[phrasePos];
    if (!isDeleting) {
      charPos++;
      el.textContent = full.slice(0, charPos);
      if (charPos === full.length) {
        isDeleting = true;
        setTimeout(loop, 1200);
        return;
      }
    } else {
      charPos--;
      el.textContent = full.slice(0, charPos);
      if (charPos === 0) {
        isDeleting = false;
        phrasePos = (phrasePos + 1) % phrases.length;
      }
    }
    setTimeout(loop, isDeleting ? 40 : 80);
  }

  loop();
})();

isDeleting フラグで「打つ」と「消す」を切り替える

isDeleting フラグで「入力中」と「削除中」のモードを管理します。入力完了後 1200ms 待ってから削除モードに切り替え、削除が終わると次のテキストへ移行します。削除速度（40ms）を入力速度（80ms）より速くすることで、テンポよいリズムが生まれます。

③ CSSのみのタイピングアニメーション

Hello, World!

HTML

<span class="typing-css">Hello, World!</span>

CSS

.typing-css {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  border-right: 2px solid #7c3aed;
  animation:
    ty-typing 2s steps(13) forwards,
    ty-cursor-blink 0.7s step-end infinite;
  font-family: monospace;
  font-size: 1.2rem;
}

@keyframes ty-typing {
  to { width: 13ch; }
}

@keyframes ty-cursor-blink {
  50% { border-right-color: transparent; }
}

steps() と overflow: hidden でJSなしで実現

width を 0 から文字数分（ch 単位）に steps() でアニメーションさせ、overflow: hidden で隠れた部分を見えなくすることで打ち込み効果を実現します。steps(13) の数字はテキストの文字数に合わせます。border-right をカーソルとして使い、同じ @keyframes で点滅させます。固定テキスト向けの手法で、可変テキストには不向きです。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。

タイピングアニメーション 実装解説｜Typing Animation CSS / JS Guide

タイピングアニメーション デザイン見本

① 基本 — タイプライター効果（JS）

② 複数テキストのループ

③ CSSのみのタイピングアニメーション

タイピングアニメーション実装解説｜Typing Animation CSS / JS Guide

タイピングアニメーションデザイン見本