文字が滑らかに別の文字へ変形。CSSテキストアニメーション「モーフィング」5選

2026年3月1日

当ページのリンクには広告が含まれています。

文字が溶けるように、あるいは吸い込まれるように、全く別の言葉へ生まれ変わる。「モーフィング」と呼ばれるこの変形エフェクトは、限られたスペースで複数のメッセージを伝えたい時に絶大なインパクトを発揮します。

純粋なCSSだけで文字の線を直接変形させることはできませんが、「ぼかし」や「光の錯覚」を巧みに利用することで、魔法のように文字がすり替わるアニメーションを作成できます。この記事では、SWELLにコピペするだけで使える、モダンで洗練されたモーフィング風コードを5つ紹介します。

Implosion Swap（インプロージョン・スワップ）

文字が極限まで中央に吸い込まれて一本の線（または点）になり、そこから爆発するように別の文字へと展開します。タイポグラフィの余白を活かしたスタイリッシュなモーフィングです。

See the Pen Implosion Swap by BaseKENT (@basekent) on CodePen.

調整方法

吸い込みの強さ (-1em): CSSの letter-spacing を -1.5em や -2em などにすると、さらに強烈に中心へ圧縮され、より「1つの点」に吸い込まれるような鋭い演出になります。
スピードとキレ: transition: all 0.6s の秒数を 0.4s ほどに短くすると、シュッ！と一瞬で入れ替わる、よりSFライクでキレのある変形になります。
展開時の文字の間隔 (0.05em): 通常の文字の開き具合です。タイポグラフィの美しさにこだわる場合、この数値を 0.1em や 0.2em にして少しゆったり配置すると、展開した時の「スタイリッシュさ」が増します。

強いぼかし（ブラー）を使って、2つの単語が永遠に切り替わり続ける無限ループアニメーションです。シンプルで美しく、ホバーするとその時点で表示されている単語がくっきりと固定されます。

See the Pen Liquid Morph by BaseKENT (@basekent) on CodePen.

調整方法

切り替わりの間隔 (6s): 秒数を変更する場合は、.word-b の animation-delay を必ずその半分の秒数（例：全体が 4s ならディレイは 2s）に設定してください。

文字が横方向のノイズ（スライス）としてバラバラに崩れ、そのノイズが再結合して別の文字になります。サイバーパンクやテクノロジー系のデザインにマッチする、デジタルな変形エフェクトです。

調整方法

歪みの角度 (skewX): 50deg を 80deg などのより大きな数値にすると、文字がほぼ横線になるまで激しく歪んでから変形します。
移動距離 (translateX): 数値を大きくすると、左右から勢いよく飛んでくるような演出になります。

テキストが縦方向にペチャンコに押し潰され、跳ね返るように別の文字に変わります。物理的な弾力（エラスティック）を感じさせるポップなモーフィングで、ボタンのホバーエフェクトなどに最適です。

See the Pen Elastic Squeeze by BaseKENT (@basekent) on CodePen.

調整方法

押し潰す方向: CSS内の scaleY（縦方向）を scaleX に変更すると、縦ではなく「横方向」にペチャンコに潰れるモーフィングになります。ドアが回転して裏返るような面白い動きになりますよ。
弾力（バウンドの強さ）: transition の cubic-bezier(0.68, -0.55, 0.265, 1.55) の最後の数値（1.55）を大きくする（例：2.0 など）と、より強く「ビヨーン」と跳ね返るようになります。逆に 1.0 程度にすると控えめな動きになります。
文字の長さが違う場合: CSS Gridのおかげで、「Contents（短い）」と「Click Me!（少し長い）」のように文字の長さが違っても、常に一番長い文字に合わせて親の幅が保たれるため、レイアウトが崩れる心配はありません。