本文介绍一种简洁、高效且兼容性更好的方式——使用 css `@keyframes` 动画替代 javascript 定时器，实现元素背景色在红色与白色之间的规律闪烁。
直接通过 JavaScript 实现背景色“闪烁”看似直观，但原代码中存在多个关键问题：
- document.getElementsByClassName('Bad') 返回的是 HTMLCollection（类数组对象），不能直接访问 .style 属性，需遍历或取索引（如 [0]）；
- badBG() 函数中的 for 循环逻辑冗余，实际只返回随机颜色，无法保证红白交替的确定性节奏；
- 使用字符串形式的 setInterval("blinkBG()", 300) 存在安全与性能隐患，应传入函数引用；
- 3 毫秒（3ms）间隔远低于浏览器重绘帧率（通常 ≥16ms），不仅无效，还可能引发异常行为。
✅ 推荐方案：纯 CSS 动画——语义清晰、性能卓越、无需 JS 干预，且天然支持硬件加速。
✅ 正确实现（CSS + HTML）
.bad {
padding: 30px;
background-color: white; /* 初始背景色 */
animation: blink 300ms infinite; /* 每300ms完整循环一次 */
}
@keyframes blink {
0%, 49.9% {
background-color: white;
}
50%, 99.9% {
background-color: red;
}
}<div class="bad">I'm very bad</div>
? 提示：动画周期为 300ms，其中 0%–49.9% 显示白色，50%–99.9% 显示红色，实现接近 1:1 占空比的稳定闪烁。若需更慢/更快节奏，仅需调整 animation-duration 值（如 600ms 或 150ms）。
⚠️ 注意事项
- 类名大小写敏感：CSS 中使用 .bad，则 HTML 中必须写 class="bad"（而非 "Bad"），否则样式不生效；
- 若需 JavaScript 动态触发动画（如错误发生时开启/关闭闪烁），可配合 classList.toggle('blinking') 与对应 CSS 规则；
- 避免在可访问性敏感场景（如表单错误提示）中使用高频闪烁，建议遵循 WCAG 指南：闪烁频率应 ≤ 3 次/秒（即周期 ≥ 300ms），当前方案完全合规。
综上，CSS 动画是实现视觉闪烁效果的最佳实践——简洁、可靠、高性能，也更符合现代前端开发的分离原则。
