テキストに滑らかな「浮遊感」を与えてみませんか？ ふんわりと浮かび上がったり、波のように滑らかに揺れたりするアニメーションは、サイト全体に心地よいリズムと柔らかさをもたらします。
この記事では、コピペするだけでSWELLに実装できる「ウェーブ＆フロート」系のCSSコードを5つ厳選しました。 シンプルで使いやすく、表示中もさりげなく動き続け、触れると表情を変える美しいアニメーションです。
Gentle Float（ジェントル・フロート）
風船のように、ゆっくりと上下にふんわり浮遊し続ける最もシンプルで使いやすいアニメーションです。ホバーすると浮遊が止まり、スッと手前に迫るように少しだけ拡大して影が落ちます。
See the Pen Gentle Float by BaseKENT (@basekent) on CodePen.
調整方法
- 浮遊の幅:
@keyframesの5pxと-5pxの数値を大きくすると、上下に動く幅が広がり、よりダイナミックに動きます。 - スピード:
animation: floatUpAndDown 4sの4sを長くする（例：6s）と、よりゆったりとした落ち着いた浮遊感になります。
Seamless Character Wave（シームレス・ウェーブ）
一文字ずつ順番に上下に揺れ、テキスト全体に滑らかな波（ウェーブ）が起きているように見せます。待機中は穏やかな波が打ち寄せ、ホバーすると波が静まり、文字間隔がスッと広がります。
See the Pen Seamless Character Wave by BaseKENT (@basekent) on CodePen.
調整方法
- 波の高さ:
@keyframes waveLetterのtranslateY(-10px)の数値を変更します。 - 波の滑らかさ:
animation-delayの間隔（0.1s）を0.15sなどに変更すると、波のうねり方が変わります。
Sway & Float（スウェイ＆フロート）
水面に浮かぶ小舟のように、上下の浮遊に「わずかな回転（揺れ）」を組み合わせた表現です。ただ上下するよりも有機的で自然な動きになります。ホバーで揺れがピタッと止まり、直立します。
See the Pen Sway & Float by BaseKENT (@basekent) on CodePen.
調整方法
- 揺れの角度:
@keyframes内のrotate(-3deg)などの角度を調整します。あまり大きくしすぎると不自然になるため、1〜5度の微細な数値がおすすめです。
Organic Liquid Float（オーガニック・リキッド）
X軸（左右）とY軸（上下）で別々の長さのアニメーションを同時にかけることで、規則性のない「8の字」のような有機的で滑らかな浮遊感を生み出します。
See the Pen Organic Liquid Float by BaseKENT (@basekent) on CodePen.
調整方法
- 不規則さの調整:
organicYの4sとorganicXの5.5sという「割り切れない秒数の差」が不規則な動きを生んでいます。この秒数を変更することで、漂う軌道が変わります。
Drop Shadow Wave（ドロップ・シャドウ・ウェーブ）
文字そのものは動かず、文字から落ちる「影」だけが波打つように動く、さりげなくも非常に洗練されたエフェクトです。ホバーすると影が文字にピタッと吸収されるように消え、文字が沈み込みます。
See the Pen Drop Shadow Wave by BaseKENT (@basekent) on CodePen.
調整方法
- 影の濃さ:
rgba(0,0,0,0.1)などの最後の数値を上げると、より濃くはっきりした影になります。 - 影の距離:
text-shadowの2番目の数値（10pxなど）を大きくすると、文字と影の距離が離れ、より高い位置に浮いているように見えます。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
