動くテキスト

波打つように1文字ずつバウンドする(跳ねる)アニメーション

bound-text

See the Pen Untitled by チータツ (@cheese_fuji) on CodePen.

まずは基本の動きから。「弾力のあるバウンド」のアニメーションは後ほど紹介します。

CSSの解説

  • keyframesを設定してアニメーションを作成
    • 0%でtranslateY(0)から
    • 100%でtranslateY(24px)まで縦に移動
  • 親要素pにクラス.bound-animを付与
  • 一括でspan全てにアニメーションを設定
    • インライン要素のspaninline-blockに変更してアニメーションを設定可能に
    • animation: 時間 キーフレーム タイミング 再生回数 向き; の5つを指定
  • 疑似要素span:nth-child()を使用して、1文字ずつにanimation-delay等間隔で指定する
    (今回は0.2sずつずらしています)

1文字ずつに遅延時間(delay)を設定してアニメーションをずらすことで、波打つようにバウンドさせています。

バウンドアニメーションの基本的な動きはこちら。
バウンドアニメーションのCSS

応用CSS

不規則に跳ねる文字

各 span タグに設定するanimation-delayを不規則な数値にすれば、バラバラな動きにすることも可能です。

See the Pen 不規則に文字が跳ねるアニメーション by チータツ (@cheese_fuji) on CodePen.

1文字毎にぼよんぼよん跳ねるアニメーション

落下の時点 100% 付近でtransform: scale(width height)を使って横長に変形することで、弾性のあるバウンドを演出できます。

注意点として、0%と100%だけに設定すると落ちながら徐々に変形してしまうので、中間 50% 付近で「変化なし」を意味するscale(1)を指定しましょう。(下記CSSでは60%時点でscale(1)を指定しています。)

See the Pen ぽよんぽよんと跳ねるアニメーション by チータツ (@cheese_fuji) on CodePen.

おすすめの使い方

  • いざという時の装飾