タイピングテキストアニメーション

純粋なCSSタイピング効果

Web上の1行テキストなら、要素の幅をsteps()で段階的に広げる定番のCSSテクニックで、文字が入力されるように表示できます。右側の枠線がカーソルになります：

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.15em solid currentColor;
  width: 0;
  animation:
    typing 3s steps(11, end) forwards,
    blink 0.8s step-end infinite;
}

@keyframes typing {
  from { width: 0; }
  to   { width: 100%; }
}

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

steps(11, end)の数字は文字数に合わせ、3sが入力速度です。ヒーローや見出しには向いていますが、複数行、カスタムフォント、共有可能なファイルへの書き出しには不向きです。

フロントエンドコンポーネント

ReactやVueなら、速度、カーソル、ループを設定できるタイピング効果がコンポーネントとして用意されています。Framerのアニメーションツールにはタイピングのバリエーションがあり、MagicUIには専用のTypingAnimationがあります。react-type-animationやtyped.jsもすぐに導入できます。

コンポーネントの見た目を共有可能なファイルにするには、無料のタイピングテキストGIFメーカーでGIFを生成してください。

動画編集ソフト

より洗練された映像には動画編集ソフトが定番です。CapCutではテキストレイヤーに「タイプライター」アニメーションを適用して書き出します。After EffectsではSource Textのキーフレーム式で文字列を1文字ずつ切り出し、点滅する四角形のカーソルを重ねます。自由度は高い一方、文字を変えるたびにレンダリングが必要です。

タイムラインなしで整ったタイピングループだけが必要なら、タイピングテキストGIFメーカーなら数秒で作れます。

無料オンラインGIFメーカー（おすすめ）

チャット、README、SNS投稿、文書ではループGIFが最も扱いやすく、ソフトのインストールも不要です：

1. テキストを入力 — 200文字まで、改行にも対応。
2. スタイルと速度を選ぶ — 9書体、カスタムカラーまたは透明背景、カーソル、4種類のキャンバスサイズ、5段階の速度。
3. GIFをダウンロード — ブラウザ内で生成、無料で透かしなし。

タイピングテキストGIFメーカーを試してください。すべてブラウザ内で動作し、iPhoneとAndroidに対応、登録も不要です。