見出しやキャッチコピーは、ページの中で最初に読まれる場所です。だからこそ動きの付け方ひとつで印象が変わり、やりすぎると読みづらくなります。ここでは文字そのものを動かすアニメーションを21種類集めました。1文字ずつ出す、光を走らせる、スクロールに合わせて濃くする、文字の骨格を変形させる——目的別に選べるよう、それぞれにライブデモとコピー可能なコード、そしてAIエージェントへの指示文を用意しています。
テキストアニメーション · 21 EFFECTS
実装の勘所
本文や重要な説明文に無限ループのアニメーションを掛けると、読む速度が動きに引きずられて可読性が落ちます。無限ループは見出し・バッジ・装飾ラベルに留め、本文には「一度だけ出現する」タイプを選ぶのが基本です。
文字単位のスタガーは、span に分割してから animation-delay を順に振る形になります。手書きすると保守できないので、JavaScriptで分割して calc(var(--i) * 60ms) のようにCSS変数で遅延を計算させるか、単語単位に粗くまとめてください。
グラデーション文字は color を transparent にして成立させる技法です。背景が読み込めない・プレフィックスが欠ける環境では文字が消えるため、通常の color を先に指定しておくことが必須になります。
FAQ
できますが、文字を span に分割する処理だけはHTML側かJavaScript側で必要になります。分割さえ済んでいれば、あとは :nth-child() や CSS変数で animation-delay をずらすだけでCSSのみで動きます。分割を避けたい場合は、単語単位や行単位のアニメーションを選ぶか、マスクを使って行ごと現れる表現に切り替えてください。
文字がHTMLにテキストとして存在していれば影響はありません。問題になるのは、文字を画像化した場合や、JavaScriptでしか生成されない場合です。本ページのエフェクトはいずれもHTMLにテキストを置いたまま見た目だけを変えるため、検索エンジンからは通常のテキストとして読まれます。
はい。Motion Lab のコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。商用プロジェクトでもそのまま利用できます。
他のカテゴリを見る
全139種類を技術別（CSS / JS / Tailwind / Framer Motion / GSAP）で絞り込むなら カタログ一覧、 長文の解説を読むなら ガイド、 AIエージェントでの実装手順は Claude Code でWebアニメーションを実装する へ。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。