文字アニメーション 40選

見出しやコピーがそのまま映える文字演出を40種。出現・常時ループ・ホバー・強調マーカーの4カテゴリ。すべてCSS/バニラJSのみ、外部ライブラリ不要。「コピー」でそのまま持ち帰れます。

01. 1文字ずつフェードアップ出現 / stagger・自動ループ
02. 回転しながら登場出現 / rotate+scale stagger
03. タイプライター+カーソル出現 / JSタイピング・自動ループ
言葉が、行ごとに 下から立ち上がる。
04. クリップマスクで下から出現 / overflow:hidden 行マスク
ピントが合う瞬間
05. ブラー→シャープ出現 / filter:blur・字間も収束
黒帯リビール
06. 黒帯スライドマスク出現 / 帯が走った跡に文字
07. バラバラから集合出現 / ランダム座標→整列
08. 弾んで着地バウンス出現 / 落下→2段バウンド
09. 3D回転パタパタ出現 / rotateX+perspective
Design
10. 線が描かれる手書き風出現 / SVG stroke-dasharray
流れるグラデ見出し
11. 流れるグラデーションループ / background-clip:text
NEON SIGN
12. ネオン点滅ループ / text-shadow+不規則チカッ
13. 波打つ文字ループ / 縦サインカーブ stagger
GLITCH TEXT
14. グリッチループ / RGBずれ+clip-path
光が横切る見出し
15. シャインループ / ハイライト帯が通過
ふわふわ浮遊
16. 浮遊ふわふわループ / 上下ドリフト+影連動
あなたの未来を照らす
17. 重要語レインボー巡回ループ / hue-rotateで色相一周
SUMMER SALE
18. ロングシャドウ脈動ループ / text-shadow伸縮
hover
19. ホバーで文字が跳ねるホバー / stagger jump
hover
20. 上下スライド入れ替えホバー / 2層テキストロール
じわっとひろがる
hover
21. 字間ふわっと拡張ホバー / letter-spacing遷移
OUTLINE
hover
22. アウトライン→塗りホバー / text-stroke+fill遷移
hover
23. 魚眼風マグニファイホバー / カーソル距離で拡大(JS)
下線が走り抜ける
hover
24. 下線が走り抜けるホバー / scaleX+origin切替
大事なところにライムのマーカーを引く
25. ライムマーカー強調 / background-size伸長
見逃せないポイント
26. 波線アンダーライン強調 / SVG pathLength描画
ここが重要
27. 手書き風の丸囲み強調 / SVG ellipse一筆描き
導入実績 0社
28. 数字カウントアップ強調 / イージング付きJS計数
このツールは速い安い簡単速い
29. 単語ローテーション強調 / 速い・安い・簡単が巡回
売上3倍を実現
30. ドンッと拡大着地強調 / スタンプ風インパクト
OPEN 24H
31. ネオンフリッカー点灯ループ / ジジッと点滅→安定点灯
32. スロットマシン文字出現 / 縦ルーレット→左から停止
33. デコーダー解読風出現 / ランダム英数字→確定(JS)
とろける液体グラデ
34. 液体グラデーションループ / 多層グラデがうねる
早い安い旨い
35. スタンプ連打出現 / ドンッドンッと順に押印
36. 爆発→再集合出現 / 飛散を逆再生で復元(JS)
RAINBOW
37. ネオンレインボー縁取りループ / 虹発光がアウトラインを周回
38. めくれる掲示板文字ループ / 空港フリップボード風
びよーんと伸びる
hover
39. 引き伸ばしバウンスホバー / ゴムのようにビヨン
売上3倍と満足度98%を同時に。
40. 蛍光マーカー2色引き強調 / ライム+ピンク時間差+手書き丸