如何用 CSS 动画实现元素背景色闪烁效果

本文介绍一种简洁、高效且兼容性良好的方式——使用 css `@keyframes` 动画，替代易出错的 javascript 定时器逻辑，实现指定类名元素（如 `.bad`）在红白背景间规律闪烁。

javaScript 实现背景色闪烁看似直观，但实际中容易陷入多个常见陷阱：例如 document.getElementsByclassName(‘Bad’) 返回的是 htmlCollection（类数组对象），不支持直接访问 style 属性，需遍历或取索引（如 [0]）；setInterval(“blinkBG()”, 300) 使用字符串形式调用函数存在安全与性能问题；而 badBG() 中的 for 循环纯属冗余——两次随机取值毫无意义，且未实现状态切换逻辑，导致颜色无法按预期交替。

更优解是交由 css 动画处理：声明式、性能高（利用 GPU 加速）、代码简洁、语义清晰。以下是推荐实现：

.bad {   padding: 30px;   animation: blink 300ms infinite; }  @keyframes blink {   0%, 49.9% {     background-color: white;   }   50%, 99.9% {     background-color: red;   } }

对应 HTML 结构（注意类名小写，符合 CSS 命名惯例）：

I'm very bad

✅ 关键说明：

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

• 动画周期设为 300ms，其中 0%–49.9% 显示白色，50%–99.9% 显示红色，实现近乎均等的“闪烁”节奏；
• 使用 infinite 确保持续循环；
• 类名统一采用小写 .bad（HTML 中 class=”bad”），避免因大小写敏感导致样式不生效（尤其在 xhtml 或严格模式下）；
• 若需控制启停，可动态增删 animation-play-state: paused / running。

⚠️ 不建议继续使用原 js 方案的原因：

• getElementsByClassName 返回集合，须遍历应用样式：Array.from(document.getElementsByClassName(‘Bad’)).forEach(el => el.style.backgroundColor = color)；
• math.random() 无法保证红白交替，仅产生随机色，违背“闪烁”本意；
• 高频 setInterval(300ms) 可能引发布局抖动，且无节流/防抖机制。

综上，CSS 动画是实现视觉闪烁效果的标准实践——语义明确、维护成本低、渲染性能优。优先选用它，让 javascript 专注业务逻辑而非 ui 动画。