テキストアニメーション css コピペ集 — 厳選13種を用途別に整理
見出しやキャッチコピーを印象づけるテキストアニメーションを、Motion LabのTEXTカテゴリから厳選した13種類を紹介します。色・光の演出、動き・変形の演出、1文字ずつ登場する演出、数値カウンターの4グループに整理しました。
PRこのテーマを本で体系的に学ぶなら：『なかしまぁ先生のCSSアニメーション入門』（Amazon）／技術書は Kindle Unlimited（30日無料）の読み放題からも探せます
色・光の演出
グラデーションが流れる、ネオンのように明滅する、光が脈打つ――CSSの background や text-shadow だけで実装できる演出です。
実装デモ：Gradient Text、Gradient Flow Text、Neon Flicker Text、Glow Pulse Text
動き・変形の演出
下からせり上がる、波打つように揺れる、横に流れ続ける、単語が入れ替わる――テキスト全体を動かす演出です。
1文字ずつ登場する演出（JS併用）
タイプライターのように1文字ずつ表示される、文字化けから正しい文字へ収束する、単語が下から時間差で登場する――ヒーローセクションで人気の演出です。カーソル位置や文字単位の制御が必要なためJSを併用します。
実装デモ：Typewriter、Scramble Text、Word Pull Up、GSAP Text Stagger
数値・カウンター系
実績や統計の数字が「0→XXX」と増加していく演出。LP・ダッシュボードの信頼感を高めます。
実装デモ：Number Count Up
FAQ
見出しに複数のテキストアニメーションを重ねてもいい？
1つの見出しには1種類に絞るのが基本です。複数を重ねると読みにくくなり、逆効果になります。
グラデーションテキストが一部ブラウザで表示されない
background-clip: text を使うため -webkit-background-clip: text; -webkit-text-fill-color: transparent; の記述も併記してください（各詳細ページのコードに含まれています）。タイプライター演出はSEOに影響しますか？
テキスト自体はDOMに存在するため問題ありません。ただしJSで1文字ずつ挿入する実装の場合は、初期HTMLに全文を含めておくとクローラーにも安全です。
日本語テキストでも同じコードで動きますか？
はい、動作します。ただしWavy TextやScramble Textなど文字単位で処理するものは、日本語は英字よりも1文字の見た目の幅が広いため、間隔調整が必要な場合があります。
関連書籍
PR · Amazon
なかしまぁ先生のCSSアニメーション入門
CSS animation を体系的に学べる入門書。実例多数。
PR · Amazon
動くWebデザインアイディア帳
実装例が豊富な定番書。UI/UXとアニメーションを実例で学べる。
PR · Amazon
Microinteractions（マイクロインタラクション設計）
Dan Saffer著・マイクロインタラクション設計の定番書。
学びを止めない · Amazonサブスク
PR · Amazon
Kindle Unlimited
技術書・デザイン書が読み放題。30日無料体験 →
PR · Amazon
Audible
移動中に耳で学ぶオーディオブック。30日無料体験 →
PR · Amazon
Amazon Prime
Prime Reading・配送特典つき。30日無料体験 →
PR · Amazon
Music Unlimited
作業用BGMに。1億曲が聴き放題・30日無料体験 →
※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。
CREATOR TOOLS · スクール（PR）
🎬 Adobe Creative Cloud — After Effects / Photoshop 業界標準ツール →
💻 SkillHacks — プログラミング・動画編集オンラインスクール →
🚀 デイトラ — Web制作スクール・実案件レベルまで習得 →
※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。