Typewriter
タイプライター
Typewriter
どんな動き？
テキストがキーボードで打ち込まれているかのように、左から1文字ずつ出現していくアニメーション。末尾には点滅するカーソルを添えるのが定番で、タイピングしている臨場感を演出できる。コード紹介やチャットUI、印象的なキャッチコピーの表示によく使われる。
よく使う場所
コード紹介チャットUIキャッチコピーローディング画面
日本語での表現例
こんな言葉で説明される動きです。
AIへの指示文（プロンプト）
ChatGPTやClaudeなどの生成AIに、このままコピーして渡せます。「詳細版」を使うと実装結果が安定しやすくなります。
Reveal the text character by character like it is being typed, with a blinking caret.Trigger:
On page load (or when the element enters the viewport).
Initial state:
width: 0 (text fully clipped)
A solid caret border on the right edge.
Animation:
Width expands in fixed character-width steps, revealing one character at a time. The caret blinks throughout.
Final state:
width: 100% (full text visible), caret keeps blinking briefly then settles.
Timing:
duration: 0.8s (steps = character count)
easing: steps()
Caret blink: 0.25s per cycle, a few iterations.実装方法の候補
この動きは以下の技術で実装できます。
CSS (steps())JavaScriptGSAP TextPlugin
別名・関連ワード
Typing EffectType-on Text