应使用@keyframes控制opacity在0.3–1之间循环实现按钮文字闪烁，时长设为1.2s–2s，配合infinite和:not(:disabled)限定，并用prefers-reduced-motion兜底可访问性。
用 CSS animation 实现按钮文字闪烁，别用 blink
HTML 没有原生的“闪烁”属性，blink 早已被所有现代浏览器废弃（Chrome 从 2013 年起就移除了），硬写 <button style="text-decoration: blink"></button> 完全无效。真正可行的是用 CSS @keyframes 配合 animation 控制文字透明度或颜色变化。
常见错误是直接对 color 做 0%→100% 突变，导致视觉跳变明显、不易识别；更稳妥的做法是控制 opacity 在 0.3–1 之间循环，保留可读性。
@keyframes flash-text {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
.flash-btn {
animation: flash-text 1.5s ease-in-out infinite;
}
- 动画时长建议设为
1.2s–2s：太快易引发焦虑，太慢失去提醒作用 - 必须加
infinite，否则只闪一次 - 避免在按钮禁用状态（
disabled）下仍触发动画，可加:not(:disabled)限定
JavaScript 动态控制闪烁开关，避免误触干扰
纯 CSS 方案无法响应用户操作（比如点击后停止闪烁），这时需要 JS 控制 class 的增删。关键不是“启动动画”，而是“按需启停”，尤其要防止多次点击导致动画叠加或卡顿。
容易踩的坑：直接反复 element.classList.add("flash-btn") 不会重置动画，得先 remove 再 add，或者用 offsetWidth 强制重排来重置。
立即学习“前端免费学习笔记（深入）”；
- 推荐做法：用
classList.toggle("flash-btn")+ 监听按钮点击事件 - 若需定时自动停闪，用
setTimeout清除 class，不要依赖animationend—— 它在infinite下根本不会触发 - 移动端要注意：闪烁可能被系统“降低动画”设置屏蔽（iOS 辅助功能开启时），可加备用方案，比如边框抖动或图标旋转
无障碍与可访问性必须处理的三个细节
闪烁效果对光敏性癫痫用户有风险，WCAG 明确要求：任何闪烁频率在 2–55Hz 之间的内容，每秒不得超过 3 次。CSS animation 默认帧率不可控，必须人工约束。
- 把动画周期设为 ≥ 200ms（即 ≤ 5 次/秒），例如
animation-duration: 200ms是危险值，应至少用500ms - 提供关闭开关：用
prefers-reduced-motion媒体查询自动禁用动画
@media (prefers-reduced-motion: reduce) {
.flash-btn { animation: none; }
}
aria-live）或声音反馈按钮闪烁和 hover/focus 状态冲突怎么解
当用户悬停或聚焦按钮时，如果同时运行闪烁动画，hover 的背景色、文字色变更可能被动画覆盖，导致状态不可见。这不是 CSS 优先级问题，而是动画声明会覆盖 transition 中的同名属性。
- 解决方案：把闪烁动画限定在
opacity，其他状态样式用background-color、border等不冲突的属性 - 或者改用
animation-play-state: paused在:hover时暂停闪烁：.flash-btn:hover { animation-play-state: paused; } - 注意：
focus状态下不应暂停，否则键盘用户可能错过提醒，应保留闪烁但增强 outline 样式
display: none 或 visibility: hidden 的父容器中仍持续运行——它会白白消耗 CPU。真要用，确保父级也做了 visibility 控制或用 hidden 属性配合 JS 开关。 
