如何使用 CSS 动画实现背景色闪烁效果（红/白交替）

本文介绍一种简洁、高效且兼容性好的方式，通过 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（注意类名小写，符合常规命名规范）：

I'm very bad

? 关键细节说明：

立即学习“前端免费学习笔记（深入）”；

• 动画周期设为 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 操作与定时器管理的诸多陷阱。