波のように揺れるテキスト
これは各文字が時間差で上下に揺れる、温かい雰囲気のウェーブテキスト見出しです。文字を 1 文字ずつ span に分け、すべてに同じ上下移動の @keyframes を当てつつ、 nth-child ごとに animation-delay を 0.1 秒ずつずらすことで、波が伝わるような連続した揺れを作っています。
解説
これは各文字が時間差で上下に揺れる、温かい雰囲気のウェーブテキスト見出しです。文字を 1 文字ずつspanに分け、すべてに同じ上下移動の@keyframesを当てつつ、nth-childごとにanimation-delayを 0.1 秒ずつずらすことで、波が伝わるような連続した揺れを作っています。ease-in-outで滑らかに往復し、CSS のみで動作します。
動きはinfiniteで繰り返すため、親しみやすく軽快な印象を持続させます。
使う場面とカスタマイズ
- 子供向け・カフェ・ペット・キャンペーンなど柔らかいトーンの見出し
- 揺れの高さは
translateY(-14px)の数値で調整 - 波の速さは
animationの 2 秒、間隔は遅延の刻みで変更
注意点として、文字を増やす場合はnth-childの指定を文字数ぶん足す必要があります。読み上げでは 1 字ずつ読まれることがあるためaria-labelに元の語を補うと親切です。常に動くのでprefers-reduced-motionでは揺れを止める代替を用意すると、動きが苦手な人にも配慮できます。
使用例・適したシーン
- ヒーローセクションのキャッチコピー
- セクション見出し
- 記事タイトル・ブログのリード
- コーポレートサイトのキービジュアル
よくある質問
揺れの大きさや速さを変えられますか
変えられます。@keyframes wave の translateY(-14px) が上下の振れ幅で、数値を大きくすると大きく揺れます。animation の 2s が 1 往復の時間で、短くすると速く、長くするとゆったり揺れます。文字間の遅延の刻みで波の伝わる間隔も変わります。
文字数を増やすにはどうしますか
HTML で 1 文字ずつ span に分け、その文字数ぶん nth-child の animation-delay を追加してください。標準は 0.1 秒刻みです。日本語にも使えますが、読み上げ対策として要素に aria-label で元の言葉を補っておくと親切です。