パルスリングアニメーション
赤い丸の周囲から波紋が外へ広がり続ける パルスリングアニメーション です。中央のドットは ::before と ::after の2つの擬似要素を重ね、 @keyframes で scale を大きくしながら opacity をゼロへ近づけることで、リングが広がって消える動きを作っています。
解説
赤い丸の周囲から波紋が外へ広がり続けるパルスリングアニメーションです。中央のドットは ::before と ::after の2つの擬似要素を重ね、@keyframes で scale を大きくしながら opacity をゼロへ近づけることで、リングが広がって消える動きを作っています。2本目の波紋には animation-delay を与え、波がずれて連続的に出るよう工夫されています。CSS のみで動き、JavaScript は使いません。
使いどころ
- 配信中を示す LIVE バッジや録画中インジケーター
- 新着通知や未読を知らせるアイコンの強調
- 地図のピンや「ここをタップ」を促す箇所の誘導
色は中央のドットと波紋の背景色をそろえて変えると統一感が出ます。広がりの大きさは scale の倍率、テンポは animation の秒数で調整できます。常時動き続けるため画面内に多用すると煩雑に見えます。重要な一点だけに使うのが効果的です。動きを抑えたいユーザー向けに prefers-reduced-motion で停止させる配慮もおすすめします。
よくある質問
波紋の広がる速さや大きさは変えられますか
はい。広がる速さはアニメーションの秒数、最終的な大きさは scale の倍率で調整できます。値を小さくすると控えめな脈動になります。
LIVE 以外のラベルにも使えますか
使えます。中央のラベル文字を NEW や録画中などに差し替えるだけで、さまざまな通知表示に応用できます。