opacity闪烁比visibility更可靠，因opacity:0保持盒模型稳定、避免布局抖动，且支持硬件加速；visibility:hidden会移除占位导致跳动，视觉不连贯。
直接用 @keyframes 配合 animation 就能实现，但闪烁频率、可访问性、浏览器兼容性这三点最容易出问题。
为什么 opacity 闪烁比 visibility 更可靠
用 visibility: hidden 切换会导致元素占位消失，可能引发布局抖动；而 opacity: 0 保持盒模型不变，动画更稳定。同时，opacity 支持硬件加速（加 transform: translateZ(0) 可进一步优化），在低端设备上帧率更稳。
常见错误是写成：
@keyframes blink {
0% { visibility: visible; }
50% { visibility: hidden; }
100% { visibility: visible; }
}
这会导致文字突然“跳入跳出”，视觉不连贯。正确做法是只动透明度：
立即学习“前端免费学习笔记（深入）”；
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
animation 的关键参数怎么设才不刺眼
默认的 infinite + ease 容易造成高频闪烁，引发视觉疲劳甚至光敏反应。W3C 建议闪烁频率低于 3Hz（即周期 > 333ms），且不使用纯黑到纯白的强对比。
-
animation-duration: 1.2s—— 对应约 0.83Hz，安全范围 -
animation-timing-function: steps(1, end)—— 避免渐变过渡，让闪烁更干脆（适合警告类提示） -
animation-iteration-count: 3—— 不要用infinite，尤其在表单提交后提示中 -
animation-fill-mode: forwards—— 确保最后一次状态（如opacity: 1）保留
如何让屏幕阅读器忽略闪烁动画
自动闪烁内容对视障用户不友好，WCAG 要求提供暂停机制或默认禁用。不能只靠 CSS，必须配合语义化标记和 JS 控制。
- 给提示元素加
aria-live="polite"，并在动画开始前用 JS 动态添加aria-busy="true" - 用
@media (prefers-reduced-motion: reduce)直接禁用动画：
@media (prefers-reduced-motion: reduce) {
.flash-alert {
animation: none;
opacity: 1;
}
}
注意：这个媒体查询在 Safari 14+、Chrome 74+、Firefox 63+ 才生效，旧版本需 fallback JS 检测 window.matchMedia('(prefers-reduced-motion)')。
IE11 兼容时的降级方案
IE11 不支持 @keyframes 中的百分比写法（如 50%），必须改用 from/to 或明确写出 0%/100%；同时不支持 animation-play-state 暂停，也无法响应 prefers-reduced-motion。
- 写法必须为：
@keyframes blink { from { opacity: 1; } to { opacity: 0.2; } } - 若需动态控制，只能用 JS 切换 class，例如
element.classList.toggle('is-paused')配合不同animation-play-state - 不要依赖
will-change: opacity，IE11 会触发渲染异常
真正麻烦的不是写法，而是当设计要求“闪烁三次后淡出”时，IE11 无法用单个 @keyframes 实现多阶段节奏——这时得拆成两个动画或改用 JS setTimeout 控制 class 切换。
