ループ型タイピングアニメーション
このスニペットは、一文の中の単語だけが「つくる・育てる・磨く・残す」と次々に切り替わる、ループ型の文字アニメーションです。差し替わる単語を span で重ねて絶対配置し、それぞれに animation-delay をずらした同じ @keyframes を適用することで、1 つが消えると次が現れる連続再生を実現してい…
解説
このスニペットは、一文の中の単語だけが「つくる・育てる・磨く・残す」と次々に切り替わる、ループ型の文字アニメーションです。差し替わる単語を span で重ねて絶対配置し、それぞれに animation-delay をずらした同じ @keyframes を適用することで、1 つが消えると次が現れる連続再生を実現しています。infinite 指定で永遠に繰り返し、JavaScript は一切使いません。色を変えた強調語が動くので、視線を自然に引きつけます。
活用シーン
- サイト冒頭のキャッチで、提供価値を複数言葉で見せたいとき
- 「私たちは〇〇する会社です」のような自己紹介の一文
- サービスの多面性を、短い語で軽快に伝えたいとき
単語を増やすときは span を足し、全体の周期と各 animation-delay を均等に割り直します。切り替えの速さは animation-duration で調整可能です。注意点として、入れ替わる単語の幅がばらつくとレイアウトが揺れるため、min-width を確保してあります。文字の動きが苦手な利用者向けに、prefers-reduced-motion 指定時は最初の単語で止める配慮を加えるとより親切です。
使用例・適したシーン
- ヒーローのキャッチコピー
- 見出しの強調
- コーポレートのキービジュアル
よくある質問
切り替わる単語を増やせますか
増やせます。span を追加し、全体のアニメーション周期と各単語の animation-delay を単語数で均等に割り直してください。遅延を等間隔にすると、なめらかに順送りされます。
単語が切り替わる速さを変えるには
アニメーションの周期である animation-duration の秒数を変更してください。値を小さくすると速く、大きくするとゆっくり入れ替わります。各 delay も同じ比率で調整します。