แอนิเมตซ้ำและหยุด
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
.badge-live {
animation: pulse 1.4s ease-in-out infinite;
}
/* หยุดเมื่อไม่โฟกัสหน้า — ลดงานพื้นหลัง */
@media (prefers-reduced-motion: no-preference) {
.spinner {
animation: spin 0.8s linear infinite;
}
}
แอนิเมตลูปไม่มีที่สิ้นสุดควรมีเหตุ (โหลด, สถานะสด) และต้องมีทางลดโมชัน