크기나 투명도가 커졌다 작아졌다를 부드럽게 반복하며 "살아있다"는 느낌을 주는 애니메이션. 알림 점, 녹화 표시등에 흔합니다.
디자인 아틀라스<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)}}scale와 opacity를 함께 ease-in-out으로 왕복시키는 게 기본형입니다. 링(ring)이 바깥으로 퍼지며 사라지는 "레이더 펄스"는 별도 의사 요소의 scale을 0에서 2 정도로 키우며 opacity를 1에서 0으로 페이드하면 됩니다.
너무 빠르면 불안해 보이고 너무 느리면 눈에 안 띕니다 — 보통 1.5~2.5초 주기를 씁니다.
"지금 주목해야 할" 요소 하나에만 쓰세요. 화면에 여러 개가 동시에 펄스하면 어디를 봐야 할지 모르게 됩니다.