opacity动画闪烁不生效的根本原因是未设置animation-iteration-count: infinite和正确配置animation-fill-mode；默认只播放一次且回退初始状态，导致“闪一下就停”或“不动”。
opacity 动画闪烁为什么有时不生效
直接写 opacity: 0 → opacity: 1 循环，常遇到“闪一下就停”或“根本不动”，根本原因是没设 animation-fill-mode 和 animation-iteration-count。浏览器默认只播一次、结束后回退到初始状态，看起来就像没动。
- 必须显式写
animation-iteration-count: infinite，否则只闪一次 - 加
animation-fill-mode: forwards不解决闪烁问题，反而可能卡在终态；这里应保持默认的none - 若父容器有
will-change: opacity或transform，可能触发合成层，但对基础闪烁非必需，别一上来就加
@keyframes 定义闪烁的关键帧节奏
用 @keyframes 控制闪烁频率和缓动，核心是让透明度在关键点突变，避免默认的 ease 导致“渐隐渐现”失去闪烁感。
- 推荐写法：
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }—— 两头不透明、中间瞬黑，节奏清晰 - 想更刺眼？把 50% 改成 49% 和 51%，制造更窄的暗帧（但注意低于 16ms 可能被浏览器合并）
- 避免写
from/to，它们无法精准控制中间态，也不利于调试具体百分比
实际应用时闪烁太慢或卡顿怎么办
闪烁频率由 animation-duration 决定，但设得太短（如 0.1s）不一定更“快”，反而可能因渲染压力丢帧；设得太长（如 2s）又失去提示效果。
- 常规提示类闪烁：用
animation-duration: 1s（即每秒闪一次），人眼识别最稳 - 紧急状态（如错误高亮）：
0.5s是安全上限，再短建议改用 border-color 或 box-shadow 配合 opacity，分散视觉负载 - 如果动画卡顿，先检查是否同时触发动画的元素过多；单个元素加
will-change: opacity可能有帮助，但别批量加
兼容性与移动端要注意的坑
所有现代浏览器都支持 opacity + @keyframes，但 ios safari 旧版本（animation-timing-function: step-start 支持不稳定，而闪烁不需要它——所以别为了“硬切”去强行用 step 函数。
立即学习“前端免费学习笔记（深入）”；
- Android WebView 4.x 有 opacity 动画闪烁延迟问题，解决方案是加一行
transform: translateZ(0)强制硬件加速（仅针对该环境） - 不要用
visibility: hidden替代opacity: 0，因为 visibility 不触发重绘，动画会断掉 - 若元素本身有
pointer-events: none，闪烁照常，但用户无法点击；需要交互时记得同步控制pointer-events
闪烁真正难的不是写出来，是控制好“闪多少次”“闪多快”“闪给谁看”。比如表单校验时，连续闪烁三次比无限循环更让人安心；后台任务中，用 2s 周期慢闪比 0.3s 快闪更少干扰操作。这些细节不在 css 语法里，而在你按下保存键前，多看两眼用户正在做什么。