TEXT

テキストアニメーション css コピペ集 — 全14種を用途別に整理

background-clip: text を使うため -webkit-background-clip: text; -webkit-text-fill-color: transparent; の記述も併記してください（各詳細ページのコードに含まれています）。

2026-07-07 公開 · Motion Lab

見出しやキャッチコピーを印象づけるテキストアニメーションを、Motion LabのTEXTカテゴリ全14種類まとめて紹介します。色・光の演出、動き・変形の演出、1文字ずつ登場する演出、数値カウンターの4グループに整理しました。

色・光の演出

グラデーションが流れる、ネオンのように明滅する、光が脈打つ――CSSの background や text-shadow だけで実装できる演出です。

下からせり上がる、波打つように揺れる、横に流れ続ける、単語が入れ替わる――テキスト全体を動かす演出です。

タイプライターのように1文字ずつ表示される、文字化けから正しい文字へ収束する、単語が下から時間差で登場する――ヒーローセクションで人気の演出です。カーソル位置や文字単位の制御が必要なためJSを併用します。

実績や統計の数字が「0→XXX」と増加していく演出。LP・ダッシュボードの信頼感を高めます。

見出しに複数のテキストアニメーションを重ねてもいい？

1つの見出しには1種類に絞るのが基本です。複数を重ねると読みにくくなり、逆効果になります。

グラデーションテキストが一部ブラウザで表示されない

background-clip: text を使うため -webkit-background-clip: text; -webkit-text-fill-color: transparent; の記述も併記してください（各詳細ページのコードに含まれています）。

タイプライター演出はSEOに影響しますか？

テキスト自体はDOMに存在するため問題ありません。ただしJSで1文字ずつ挿入する実装の場合は、初期HTMLに全文を含めておくとクローラーにも安全です。

日本語テキストでも同じコードで動きますか？

はい、動作します。ただしWavy TextやScramble Textなど文字単位で処理するものは、日本語は英字よりも1文字の見た目の幅が広いため、間隔調整が必要な場合があります。

※ Amazonアソシエイト・プログラム参加。リンク経由のご購入で運営者が紹介料を受け取る場合があります。