通知ドットやライブ配信中バッジで使われる、波紋が広がり続ける演出。scaleとopacityの同時アニメーションです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
波紋の正体は、ドットと同じ形の::beforeと::afterを拡大しながら透明にしていくアニメーションです。2つの擬似要素に1秒差のdelayを付けることで、波が途切れなく続いて見えます（1つだけだと波の間に空白ができます）。background: inheritで親の色を引き継ぐため、色替えは.dotの1箇所で済みます。
この通知アイコンの周りに、波紋のように広がるパルスリングを付けて。::before擬似要素をscaleとopacityでアニメーションして。
パルスリングを二重にして、animation-delayをずらして連続的に波紋が出るようにして。
そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。