最可靠方案是用 css @keyframes 实现 opacity 循环动画，周期 1.4s、范围 0.3→1→0.3，配 animation-fill-mode: forwards；避免 js class 切换因时序/兼容/性能问题导致失效或冲突。
用 CSS @keyframes 实现透明度闪烁动画
直接写一个循环改变 opacity 的动画最可靠，不依赖 JS，兼容性好（IE10+ 支持）。关键不是“闪”，而是控制节奏和视觉强度——太快易眩晕，太慢失去警示效果。
- 动画周期建议设为
1.2s～1.6s，比人眼反应略快，但不会触发光敏不适 - 透明度范围别用
0→1，改用0.3→1更稳妥，避免按钮完全消失导致点击失焦 - 必须加
animation-fill-mode: forwards，否则动画结束后会回退到初始状态，影响后续交互
```css
@keyframes blink {
0% { opacity: 0.3; }
50% { opacity: 1; }
100% { opacity: 0.3; }
}
.btn-alert {
animation: blink 1.4s infinite ease-in-out;
animation-fill-mode: forwards;
}
```
为什么不用 transition + JS 切换 class？
单纯靠 JS 控制 class 切换来模拟闪烁，容易出时序问题：比如快速连续点击、页面卡顿、或用户手动禁用 JS 时动画直接失效。更麻烦的是，你得自己管理计时器和状态，稍不留神就出现“闪一下停住”或“越闪越快”。
-
setInterval启动后若没清理，页面跳转或组件卸载时可能内存泄漏 - 多个按钮共用同一套 JS 逻辑时，
classList.toggle()容易冲突（比如两个按钮同时执行 toggle，实际只变一次） - 移动端 Safari 对频繁 DOM 类切换的渲染优化较差，可能出现掉帧
按钮闪烁时怎么防止误点或干扰操作？
闪烁本身会吸引注意力，但如果用户正要点击，动画中途透明度变低，可能导致点击落空。这不是 bug，是设计缺陷。
- 给按钮加
pointer-events: auto（确保始终可点），不要用opacity: 0阶段屏蔽事件 - 如果按钮承载关键操作（如“删除”“提交”），建议在闪烁同时加一个静态视觉提示，比如边框颜色同步变化：
border-color: #f00→#ff6666 - 避免在模态框、表单校验等高频交互区域滥用该效果；一次页面最多 1～2 个闪烁按钮，否则视觉噪音过大
兼容老浏览器时的降级处理
IE9 及以下不支持 @keyframes，但真要兼容，别硬上 CSS 动画，改用 JS 做最小可用方案——只做一次淡入淡出，不循环，且仅在检测到不支持时启用。
- 用
document.body.style.animationName !== undefined检测原生支持 - 降级逻辑里别用
setTimeout嵌套实现循环，改用requestAnimationFrame控制帧率 - 注意 IE 下
opacity需配合filter: alpha(opacity=30)，但现代项目基本可忽略
真正难的不是让按钮闪起来，而是判断它该不该闪、闪多久、闪完要不要自动停——这些逻辑不在 CSS 里，而在业务状态机里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
