A gentle repeating grow-and-shrink or fade cycle that makes an element feel "alive." Common on notification dots and recording indicators.
Design Atlas<div class="stage">
<div class="dotwrap"><span class="ring"></span><span class="dot"></span></div>
<div class="live"><i class="rec"></i>LIVE</div>
</div>.stage{display:grid;justify-items:center;gap:26px}
.dotwrap{position:relative;width:20px;height:20px}
.dot{position:absolute;inset:0;border-radius:50%;background:var(--accent-2)}
.ring{position:absolute;inset:0;border-radius:50%;background:var(--accent-2);animation:ping 1.8s cubic-bezier(0,0,.2,1) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.4);opacity:0}}
.live{display:flex;align-items:center;gap:6px;font:700 11px/1 sans-serif;letter-spacing:.08em;color:var(--muted)}
.rec{width:8px;height:8px;border-radius:50%;background:var(--accent-2);animation:beat 1.6s ease-in-out infinite}
@keyframes beat{50%{opacity:.25;transform:scale(.8)}}The basic form is scale and opacity oscillating together with ease-in-out. A "radar ping" — a ring expanding outward and fading — is a pseudo-element scaling from 0 to about 2 while its opacity fades from 1 to 0.
Too fast reads as anxious, too slow goes unnoticed — 1.5 to 2.5 seconds is a common range.
Use it on the one element that needs attention right now. Multiple things pulsing at once and the user won't know where to look.