文字が順番に現れる、滑らかな時間差（ディレイ）アニメーション。 この記事では、CSSのanimation-delayを使って、一文字ずつ動きをつけるコードを5つ紹介します。
複雑なJavaScriptは一切不要。出現時の美しさはもちろん、表示中もさりげなく動き続け、マウスホバーで表情を変えるリッチな演出を用意しました。シンプルで洗練された動きを、SWELLのサイトにぜひ取り入れてみてください。
Wave Cascade（ウェーブ・カスケード）
一文字ずつ下からふわりと舞い上がりながら出現します。待機中は、スタジアムのウェーブのように文字が順番に上下に揺れ続け、リズミカルな動きを生み出します。ホバーすると波がピタッと止まり、文字間隔が広がります。
See the Pen Wave Cascade by BaseKENT (@basekent) on CodePen.
調整方法
- 波の高さ (
translateY(-8px)):@keyframes waveIdleの数値を変更すると、待機中の上下の揺れ幅を調整できます。 - ズレの間隔 (
0.1sずつ):animation-delayの数値を0.05s刻みなどに狭めると、よりスピーディなウェーブになります。
Fade & Breathe Stagger（フェード＆ブリーズ・スタガー）
霧の中から現れるように、一文字ずつゆっくりとフェードインします。待機中は、文字が順番に微細に拡大・縮小し、静かに呼吸しているような品格のある演出です。ホバーで文字が少し浮き上がります。
See the Pen Fade & Breathe Stagger by BaseKENT (@basekent) on CodePen.
調整方法
- ブラーの強さ (
blur(5px)): 出現時のぼかし具合です。数値を大きくすると、より深く霧がかった状態から現れます。 - 呼吸の深さ (
scale(0.95)):0.9などにすると、待機中の縮む動きがより大きくなります。
3D Flip Sequential（3Dフリップ・シーケンシャル）
駅の電光掲示板（パタパタ時計）のように、文字がX軸に回転しながら一文字ずつ出現します。待機中もゆっくりと順番に回転し続け、ホバーすると全員が一斉に正面を向いて停止します。
See the Pen 3D Flip Sequential by BaseKENT (@basekent) on CodePen.
調整方法
- 遠近感 (
perspective: 500px): 親要素の数値を小さくすると、回転時の立体感（手前に迫る感じ）が強くなります。 - 待機中の動き:
@keyframes flipIdleで、時々少しだけ回転する（パタッと動く）ように設定しています。
Rubberband Hop（ラバーバンド・ホップ）
ゴムまりのように、縦に伸びて落ちてきながら順番に出現します。待機中は一文字ずつ小さく飛び跳ね続け、ポップで楽しげな印象を与えます。ホバーで動きが止まり、文字に影が落ちます。
See the Pen Rubberband Hop by BaseKENT (@basekent) on CodePen.
調整方法
- 出現時の伸び縮み:
@keyframes rubberIn内のscale3d(X, Y, Z)のY軸（真ん中の数値）を変更すると、縦方向の伸び縮み具合を調整できます。
Glitch Slide Delay（グリッチ・スライド・ディレイ）
斜めに少し歪んだ状態で、左右から滑り込むように順番に出現します。待機中は一文字ずつ左右に微細に揺れ、デジタルノイズのようなクールな不具合感を演出。ホバーで真っ直ぐに整列します。
See the Pen Glitch Slide Delay by BaseKENT (@basekent) on CodePen.
調整方法
- スライド距離: 初期状態の
translateX(-20px)を大きくすると、より遠くから滑り込んできます。 - グリッチ（ノイズ）の頻度:
@keyframes glitchIdleのパーセンテージを調整することで、ブレが発生するタイミングを変えられます。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
