用@keyframes定义blink动画实现按钮闪烁最可靠，如opacity从1→0.3→1，配animation: blink 1s infinite；避免visibility/display导致布局跳动，兼顾可访问性与用户控制权。
按钮闪烁用 @keyframes 最直接
纯 CSS 实现按钮闪烁，核心是定义一个透明度或颜色变化的动画序列。@keyframes 是唯一可靠方式，transition 本身无法触发周期性闪烁（它只响应状态变化，比如 hover 或 class 切换）。
常见错误是试图只靠 transition + JS 定时 toggle class 来“模拟”闪烁——这会导致卡顿、难以控制节奏，且在页面失焦时动画可能暂停或错乱。
正确做法：
- 定义
@keyframes blink，例如从opacity: 1到opacity: 0.3再回到1 - 给按钮添加
animation: blink 1s infinite，其中1s控制闪烁频率，infinite保证持续 - 若需兼容老版本 Safari，加
-webkit-animation前缀（iOS 12 及更早仍需）
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
button.blinking {
animation: blink 1s infinite;
}
避免 visibility: hidden 导致布局跳动
用 visibility: hidden / visible 做闪烁看似简单，但会引发布局重排：元素仍占位但不可见，周围内容不会流动；而用 opacity 保持 DOM 占位和交互能力（如仍可点击、聚焦），视觉上更自然。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
-
display: none→ 完全脱离文档流，按钮消失后其他元素会上移，闪烁变成“弹跳” -
opacity: 0→ 按钮不可见但仍响应鼠标事件，若不希望如此，需同步加pointer-events: none - 动画时间过短（如
0.2s）→ 在部分低端设备上易产生残影或渲染撕裂
用 animation-timing-function 控制闪烁节奏感
默认线性（linear）的闪烁显得机械；换成 ease-in-out 或自定义贝塞尔曲线，能让明暗过渡更柔和，降低视觉干扰。
实际建议：
- 警示类按钮（如“删除”）可用
cubic-bezier(0.3, 0.8, 0.7, 0.2)，让闪烁有“呼吸感” - 避免使用
steps(2, start)类似帧动画——它会产生突兀的开关效果，不适合 UI 按钮 - 若需配合 JS 控制启停，推荐用
animation-play-state: paused / running，而非反复增删 class
注意可访问性与用户控制权
自动闪烁对光敏性癫痫用户存在风险，WCAG 明确要求避免 3Hz–50Hz 范围内的闪烁（即动画周期在 0.02s–0.33s 之间）。1s 周期是安全的，但若产品面向医疗、教育等高合规场景，最好提供关闭开关。
实操建议：
- 默认禁用闪烁，仅在用户主动开启提示模式后启用（如通过设置页 toggle）
- 监听系统级减少动画偏好：
@media (prefers-reduced-motion: reduce)中强制设animation: none - 不要对所有按钮统一加闪烁——仅限真正需要强提示的临时操作，比如未保存变更、网络异常重试
闪烁本身很简单，难的是判断“该不该闪”以及“闪多久才不算打扰”。
