通知ドットやライブ配信中バッジで使われる、波紋が広がり続ける演出。scaleとopacityの同時アニメーションです。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
波紋の正体は、ドットと同じ形の::beforeと::afterを拡大しながら透明にしていくアニメーションです。2つの擬似要素に1秒差のdelayを付けることで、波が途切れなく続いて見えます（1つだけだと波の間に空白ができます）。background: inheritで親の色を引き継ぐため、色替えは.dotの1箇所で済みます。