パルス連続リング（通知・注目）
パルス連続リングは、中央のドットから波紋が外へ広がり続けるアニメーションで、新着通知や「ここを押せる」という示唆に使われます。本体の丸に対し、 ::before と ::after の 2 つの擬似要素を重ね、 @keyframes で transform:scale を大きくしながら opacity を 0 に落…
解説
パルス連続リングは、中央のドットから波紋が外へ広がり続けるアニメーションで、新着通知や「ここを押せる」という示唆に使われます。本体の丸に対し、::before と ::after の 2 つの擬似要素を重ね、@keyframes で transform:scale を大きくしながら opacity を 0 に落とすことで波紋を表現しています。::after に animation-delay を与えて時間差を作り、波が連続的に出るように見せているのが要点です。要素は 1 つで完結し、JavaScript も画像も不要です。
合う場面
- ベルアイコンの新着通知バッジ
- 電話・チャットなど「今すぐ反応してほしい」ボタン
- 地図上のピンや注目スポットの強調
色は本体と擬似要素の background を同じ値で揃えると自然です。波の最大サイズは scale の倍率、周期は animation の秒数で調整できます。常時動くため画面内で多用すると注意が分散します。要点を 1 か所に絞り、動きを嫌う利用者向けに prefers-reduced-motion で停止する配慮を加えると安心です。
使用例・適したシーン
- 購入完了・サブスク成約画面
- ゲーム要素のあるサイト
- イベント告知
よくある質問
波紋の広がる大きさを変えられますか？
キーフレーム内の transform:scale の倍率（サンプルでは3.5）を変えると広がりの最大サイズが変わります。小さくすれば控えめ、大きくすれば派手な波紋になります。
色を変えるにはどこを直しますか？
本体の丸と2つの擬似要素（before・after）の background を同じ色に揃えて変更します。3か所をそろえないと波紋と本体の色がずれて不自然になります。