本文介绍一种简洁、高效且兼容性好的方式，通过 css `@keyframes` 动画替代 javascript 定时器，实现元素背景色在红色与白色之间规律闪烁，避免原代码中因 dom 获取错误、异步逻辑混乱和性能问题导致的失效。
原 JavaScript 实现存在多个关键问题：
- document.getElementsByClassName('Bad') 返回的是 HTMLCollection（类数组对象），不能直接设置 style.backgroundColor，需遍历或取索引（如 [0]）；
- badBG() 函数中的 for 循环无实际意义，每次只保留最后一次随机结果，且未实现“交替”逻辑（而是每次随机），无法保证红/白严格轮换；
- 使用字符串形式的 setInterval("blinkBG()", 300) 存在安全与性能隐患，应传入函数引用；
- 3 毫秒间隔过短，超出浏览器重绘能力（通常最低有效帧间隔约 16ms），极易导致卡顿或无效渲染。
✅ 推荐方案：纯 CSS 动画（更稳定、更轻量、自动硬件加速）
.bad {
padding: 30px;
animation: blink 300ms infinite;
}
@keyframes blink {
0%, 49.9% {
background-color: white;
}
50%, 99.9% {
background-color: red;
}
}对应 HTML（注意类名小写，符合常规命名规范）：
<div class="bad">I'm very bad</div>
? 关键细节说明：
立即学习“前端免费学习笔记（深入）”；
- 动画周期设为 300ms，其中 0%–49.9% 显示白色，50%–99.9% 显示红色，实现接近 1:1 的均匀闪烁；
- 使用 background-color（而非 background）确保样式可被其他背景属性（如图片、渐变）安全覆盖；
- 若需 JS 动态控制启停，可配合 animation-play-state：
const el = document.querySelector('.bad'); el.style.animationPlayState = 'paused'; // 暂停 el.style.animationPlayState = 'running'; // 恢复
⚠️ 注意事项：
- 避免对大量元素同时启用高频率动画，可能影响性能；如需批量控制，建议用 CSS Custom Properties + :root 变量统一管理；
- 若必须用 JS 实现（如需条件触发或复杂状态机），推荐使用 requestAnimationFrame 替代 setInterval，并明确维护状态变量（如 isRed = !isRed）；
- 语义化提醒：频繁闪烁可能影响光敏性用户，生产环境建议提供关闭开关，并遵循 WCAG 2.3.2 闪烁阈值标准。
综上，CSS 动画是实现背景色规律闪烁的首选方案——声明式、高性能、易维护，且天然规避了 DOM 操作与定时器管理的诸多陷阱。
