闪烁动画需用三帧实现循环：0%和100%设opacity:1，50%设opacity:0；必须配animation-name、animation-duration（单位不可省）、animation-iteration-count（持续闪烁需infinite）；频率应低于3Hz以防不适，可加transform: translateZ(0)优化性能并提供暂停机制。
用 @keyframes 定义闪烁动画最直接
闪烁本质是元素在可见与不可见之间快速切换，核心是控制 opacity 或 visibility。推荐用 opacity，因为 visibility: hidden 会脱离渲染流，可能影响布局；而 opacity: 0 保留占位，动画更稳定。
常见错误是把关键帧写成 0% { opacity: 1; } 100% { opacity: 0; } —— 这只会淡出一次，不是“闪烁”。真正闪烁需要至少三帧来回切换：
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
这样浏览器会在 0%→50%→100% 循环执行，形成稳定闪烁节奏。
animation 属性必须配齐这三项才生效
只定义 @keyframes 不会触发动画，必须在元素上应用 animation。容易漏掉或写错的是这三个值：
立即学习“前端免费学习笔记（深入）”；
-
animation-name：必须和@keyframes名称完全一致（区分大小写） -
animation-duration：单位不能省略，比如0.5s不能写成0.5 -
animation-iteration-count：默认是1，要持续闪烁得显式写infinite
完整写法示例：
.alert {
animation: blink 0.8s infinite;
}
如果想让闪烁更“急促”，可缩短 duration 到 0.3s；若用于重要警告，建议加 animation-timing-function: steps(1) 避免渐变过渡，实现硬切效果。
避免闪烁干扰用户操作的两个关键点
闪烁动画容易引发视觉疲劳甚至光敏反应，W3C 明确建议：闪烁频率应低于 3Hz（即每秒不超过 3 次）。这意味着 animation-duration 不应小于 0.34s（1 ÷ 3 ≈ 0.333）。
另一个常被忽略的问题是：动画默认会触发重绘（repaint），频繁闪烁可能卡顿。优化方式是强制启用硬件加速：
- 给元素加
transform: translateZ(0)或will-change: opacity - 但注意：
will-change不宜滥用，仅在真正需要时对特定元素设置
此外，务必提供关闭途径——比如通过 JS 切换 class 停止动画，或监听用户交互（如点击、聚焦）后自动清除 animation。
用 animation-play-state 动态控制闪烁启停
纯 CSS 实现“点击暂停闪烁”是可行的，不需要 JS 控制 class 切换。关键是利用 :active 或自定义属性配合 animation-play-state：
.alert {
animation: blink 0.6s infinite;
}
.alert.paused {
animation-play-state: paused;
}
然后用 JS 简单绑定：
document.querySelector('.alert').addEventListener('click', function() {
this.classList.toggle('paused');
});
注意：animation-play-state 只影响当前动画播放状态，不影响已设定的 duration 或 iteration-count，暂停后再恢复会从断点继续，不是重播。
真正难处理的是多状态协同：比如表单校验中，错误提示要闪烁，但用户开始输入后就得立刻停止——这时 JS 主动移除 class 比依赖伪类更可靠。
