本文介绍一种简洁、高效且符合现代 Web 标准的方式——通过 CSS @keyframes 动画实现指定类名元素（如 .bad）的背景色在红白之间规律闪烁，避免 JavaScript 定时器带来的性能与兼容性问题。
本文介绍一种简洁、高效且符合现代 web 标准的方式——通过 css `@keyframes` 动画实现指定类名元素（如 `.bad`）的背景色在红白之间规律闪烁，避免 javascript 定时器带来的性能与兼容性问题。
在 Web 开发中，实现背景色“闪烁”效果常被用于高亮错误状态（如表单校验失败、数据异常等）。虽然初学者容易想到用 setInterval 配合 JavaScript 动态修改 style.backgroundColor，但原始代码存在多个关键问题：
- document.getElementsByClassName('Bad') 返回的是 HTMLCollection（类数组对象），不能直接访问 .style 属性，需遍历或取索引（如 [0]）；
- badBG() 函数中的 for 循环逻辑冗余，实际只返回随机颜色，但未实现“交替”逻辑（当前是纯随机，非红→白→红→白的确定切换）；
- 使用字符串形式的 setInterval("blinkBG()", 300) 存在安全与性能隐患，应传入函数引用；
- 3 毫秒间隔过短（远低于浏览器重绘帧率，通常为 16ms/帧），不仅无法感知闪烁，还极易导致主线程阻塞。
✅ 推荐方案：纯 CSS 动画，语义清晰、性能优异、无需 JS 干预，且天然支持硬件加速。
✅ 正确实现方式（CSS + HTML）
.bad {
padding: 30px;
background-color: white; /* 初始背景色 */
animation: blink 600ms infinite; /* 总周期600ms：红白各占300ms */
}
@keyframes blink {
0%, 49.9% {
background-color: white;
}
50%, 100% {
background-color: red;
}
}<div class="bad">I'm very bad</div>
? 关键说明：
- 动画总时长设为 600ms（而非 300ms），确保红、白两色各显示约 300ms，形成清晰可辨的“闪烁”节奏；
- 49.9% 和 50% 的临界点设计，可避免因渲染精度导致的中间过渡色（如浅粉）；
- 类名使用小写 .bad（符合 HTML/CSS 命名惯例），注意与原始代码中大写的 "Bad" 区分；
- 若需暂停/启动动画，可通过 JS 控制 element.style.animationPlayState = 'paused' / 'running'。
⚠️ 补充建议（如必须用 JS 场景）
若业务强依赖 JavaScript 控制（例如按条件启停、动态配色），可改用 requestAnimationFrame 或优化后的 setInterval：
立即学习“前端免费学习笔记（深入）”；
let isRed = false;
function toggleBlink() {
const elements = document.querySelectorAll('.bad');
elements.forEach(el => {
el.style.backgroundColor = isRed ? 'white' : 'red';
});
isRed = !isRed;
}
const blinkInterval = setInterval(toggleBlink, 600); // 600ms 周期
// 清除示例：clearInterval(blinkInterval);但除非有特殊交互需求，优先选用 CSS 方案——它更轻量、更可靠，也更易于维护与测试。
总结：闪烁效果本质是视觉节奏控制，CSS 动画为此而生。抛弃冗余 JS 轮询，拥抱声明式样式，让代码更健壮、页面更流畅。
