シンプルなテキストも、「字間」を操ることで劇的に生まれ変わります。
映画のオープニングクレジットや、高級ブランドのWebサイトで見かけるような、文字の間隔が静かに広がり、また閉じていく演出。 この記事では、そんな「余韻と品格」を感じさせるCSSテキストアニメーションを5つ厳選しました。無駄を削ぎ落としたミニマルなコードで、コピペするだけでSWELLのサイトにモダンな洗練さをプラスできます。
Cinematic Breathe（シネマティック・ブリーズ）
映画のタイトルのように、ゆったりとした深呼吸のペースで字間が広がり、また縮んでいきます。優雅で落ち着いた印象を与え、ホバーするとさらに字間が広がり、ふわりと浮き上がります。
See the Pen Cinematic Breathe by BaseKENT (@basekent) on CodePen.
調整方法
- 字間の広がり具合 (
0.3em):@keyframes内の数値を大きくすると、より大きく呼吸するようになります。 - フォントの変更:
font-family: serif;を削除すると、SWELL標準のゴシック体になり、モダンで無機質な印象に変わります。
Whisper Gather（ウィスパー・ギャザー）
最初はバラバラに散らばっていた文字が、ささやき声のように静かに集まってきます。待機中は微細に字間が揺らぎ、ホバーするとふっと緊張が解けるように少しだけ間隔が開きます。
See the Pen Whisper Gather by BaseKENT (@basekent) on CodePen.
調整方法
- 集まるスピード:
@keyframesの30%の位置を50%などに変更すると、文字が集まるまでの時間が長くなります。 - 初期の広がり (
1em):0%のletter-spacingを2emなどにすると、画面外から集まってくるようなダイナミックな演出になります。
Tension & Release（テンション＆リリース）
文字同士が窮屈なほど密着した状態（テンション）から、ゆっくりと解放（リリース）されていくような動きを繰り返します。ホバーで一気に間隔が開き、開放感を与えます。
See the Pen Tension & Release by BaseKENT (@basekent) on CodePen.
調整方法
- 密着度 (
-0.05em): マイナスの数値を大きくする（例：-0.1em）と、文字同士が完全に重なり合うようになります。 - アニメーションの緩急:
cubic-bezierの数値を変更するか、ease-in-outに変えることで、広がる際のリズムを調整できます。
Focus & Spread（フォーカス＆スプレッド）
カメラのピントが合うように文字がくっきりと現れ、その後、光が広がるように字間がスッと伸びていきます。ホバーすると文字がシャープになり、間隔がピタリと止まります。
See the Pen Focus & Spread by BaseKENT (@basekent) on CodePen.
調整方法
- サイクルの長さ (
6s): 秒数を短くすると、せわしなくピントが合ったりズレたりするようになります。ゆったり見せたい場合は8sなどがおすすめです。 - 最大の間隔 (
0.4em):50%の時点での字間を調整して、最大の広がり幅を決めます。
Elegant Drift（エレガント・ドリフト）
字間が広がりながら、まるで風に乗って横へ流れる（ドリフトする）ような動きを見せます。待機中は常に揺らぎがあり、ホバーすると字間がキュッと引き締まり、文字が強調されます。
See the Pen Elegant Drift by BaseKENT (@basekent) on CodePen.
調整方法
- 横揺れの幅 (
translateX):5pxと-5pxの数値を大きくすると、左右へのスライド幅が大きくなり、浮遊感が増します。 - ホバー時の反発力:
transitionに設定しているcubic-bezierのおかげで、ホバー時に少しバウンドするように戻ります。不要な場合はeaseに変更してください。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
