@keyframes 是纯 css 实现背景色闪烁的唯一可靠方式，需搭配 animation 属性触发，定义至少 0%、50%、100% 关键帧，避免 infinite 导致光敏风险，推荐 duration 2–3s、iteration-count 3 并用 forwards 保持终态。
background-color 闪动用 @keyframes 最直接
纯 CSS 实现背景色闪烁，不用 JS 干扰渲染流程，@keyframes 是唯一可靠路径。浏览器对 background-color 的动画支持成熟，但必须搭配 animation 属性触发，单独写 keyframes 不会生效。
- 必须定义至少两个关键帧（
0%和100%），中间可加50%控制节奏 - 推荐用
ease-in-out缓动，硬切（steps(1)）容易刺眼，也不利于可访问性 - 避免用
infinite无休止闪烁——WCAG 明确要求闪烁频率不能在 2–55 Hz 之间，否则可能诱发光敏性癫痫
```css
@keyframes pulse-bg {
0% { background-color: #e0f7fa; }
50% { background-color: #40c4ff; }
100% { background-color: #e0f7fa; }
}
.flash-warning {
animation: pulse-bg 2s ease-in-out infinite;
}
```
闪动太频繁？控制 animation-duration 和 iteration-count
用户说“闪得头晕”，大概率是 animation-duration 设得太短（如 0.5s）或没设上限。真实场景里，提示类闪动通常只需 2–3 次，不是永动机。
- 紧急状态可用
animation-iteration-count: 3，结束后自动停在终态（由animation-fill-mode: forwards保证） - 想让最后一次停留更久？把关键帧拉长：比如
0%, 90%是高亮色，100%回退，再配animation-duration: 3s - 别用
animation-delay模拟“启动延迟”——它只推迟第一次播放，循环时无效
IE 或旧版 Safari 不认 background-color 动画？换 color + filter 组合兜底
IE10+ 支持 background-color 动画，但 iOS Safari 9.3 之前有渲染抖动；真要兼容极老环境，改用文字色+半透明遮罩更稳。
- 用
color动画 +background: rgba(0,0,0,0.1)模拟“呼吸感”，视觉干扰小且兼容性好 - 或者用
filter: brightness()配合background-color，iOS8+、Edge12+ 都支持，比纯 background 更柔和 - 注意：
filter动画在部分安卓 WebView 里性能较差，慎用于列表项高频刷新场景
React/Vue 里动态加闪动类？别用 setTimeout 切 class
组件内控制闪动启停，最干净的方式是绑定 className 变量，靠状态驱动，而不是手动操作 DOM。
- React 中用
useState管理isFlashing，配合useEffect控制持续时间，避免内存泄漏 - Vue 中用
:class="{ 'flash-warning': isUrgent }"，配合watch或计算属性触发 - 绝对不要在 useEffect / mounted 里写
setTimeout(() => el.classList.remove('flash-warning'), 2000)——组件卸载后 el 可能已不存在，报错且无法清理定时器
CSS 闪动看着简单，真正卡住人的地方往往在：动画结束态不保留、跨浏览器颜色插值差异、以及忘了它本质是视觉干扰手段——用多了反而让人忽略重点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
