Expand/grow
The “Live” pill gently breathes with a scale keyframe so the row reads as active without bouncing the surrounding text.
Widely Supported
Quick implementation
@keyframes expandgrow-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.08); }
}
.expandgrow-card__badge {
animation: expandgrow-pulse 2.2s ease-in-out infinite;
}Prompt this to your LLM
Badges and markers.
You are animating a small label pill to “breathe”.
Goal: scale 1 → 1.08 → 1 over ~2s, ease-in-out, infinite.
Constraints:
- prefers-reduced-motion: static scale(1).
- Use transform only.
Return CSS.Why this matters in 2026
Subtle scale draws the eye to status chips—less aggressive than color-only flashes.
The logic
Symmetric keyframes keep the motion loop seamless; avoid animating width/height so layout stays stable.
Accessibility & performance
Offer a still state for reduced motion; cap amplitude so the badge does not feel like error feedback.