本文介绍一种简洁、高效且兼容性好的方式——使用 CSS @keyframes 动画，替代易出错的 JavaScript 定时器方案，实现元素背景色在红白之间规律闪烁。
本文介绍一种简洁、高效且兼容性好的方式——使用 css `@keyframes` 动画，替代易出错的 javascript 定时器方案，实现元素背景色在红白之间规律闪烁。
在前端开发中，实现背景色“闪烁”（如红/白交替）看似简单，但若直接用 JavaScript 配合 setInterval 和 getElementsByClassName 操作 DOM，极易陷入常见陷阱：例如 getElementsByClassName 返回的是 HTMLCollection（类数组对象），不支持直接 .style 赋值；随机逻辑误用导致颜色切换无序；字符串形式的 setInterval("...", ms) 存在作用域与安全风险；且频繁 DOM 写入影响性能。
✅ 推荐方案：纯 CSS 动画——语义清晰、性能优异、代码精简、天然支持硬件加速。
✅ 正确实现步骤
- 定义动画关键帧：使用 @keyframes 命名动画（如 blink），精确控制 0% → 49.9% 显示白色，50% → 99.9% 切换为红色，避免 100% 时刻回退造成视觉停顿；
- 绑定动画到目标类：为 .bad（注意类名大小写需与 HTML 一致，原问题中为 "Bad"，CSS 中推荐小写命名规范）设置 animation 属性，指定持续时间、重复次数与动画名称；
- HTML 中应用类名：确保元素正确添加对应 class。
.bad {
padding: 30px;
background-color: white; /* 初始背景，提升可访问性 */
animation: blink 300ms infinite;
}
@keyframes blink {
0%, 49.9% {
background-color: white;
}
50%, 99.9% {
background-color: red;
}
}<div class="bad">I'm very bad</div>
? 提示：动画周期设为 300ms 可实现接近原需求的 300ms 级别闪烁节奏（即每 300ms 切换一次状态）。若需更慢节奏（如每秒闪一次），可改为 1s 并调整关键帧比例（如 0%, 49% → 白，50%, 99% → 红）。
⚠️ 原 JS 方案的主要问题解析
- document.getElementsByClassName('Bad') 返回集合，须遍历或取 [0] 才能操作样式；
- for 循环内随机取色无实际意义，最终只返回最后一次结果，无法形成“交替”逻辑；
- setInterval("blinkBG()", 300) 使用字符串形式执行，存在潜在安全与作用域隐患，应改用函数引用：setInterval(blinkBG, 300)；
- 缺少清除机制，页面长期运行可能累积定时器。
✅ 进阶建议
- 如需动态启停闪烁，可通过 JS 切换 CSS 类（如 .bad.blinking）配合 animation-play-state: paused/running 控制；
- 对于无障碍友好（a11y），避免高频闪烁（< 3Hz），防止诱发光敏性癫痫——W3C WCAG 明确建议闪烁频率不超过 3 次/秒；
- 若必须用 JS 控制（如响应用户交互），推荐 requestAnimationFrame + 状态标记，而非 setInterval。
综上，CSS 动画是实现视觉闪烁的首选方案：声明式、高性能、易维护，且天然规避了 DOM 操作与定时器管理的诸多陷阱。
立即学习“前端免费学习笔记（深入）”；
