动画失效主因是 animation-name 与 @keyframes 名称不一致，需全小写加下划线统一命名；闪烁频率宜设为 0.5–2hz（如 duration:1.2s），避免光敏风险并兼顾可访问性；须用 animationend 清理状态，且必须支持 prefers-reduced-motion。
animation-name 和 @keyframes 名字必须完全一致
名字不匹配是闪烁失效最常见原因，浏览器根本不会触发动画。比如定义了 @keyframes warn-pulse，但元素上写的是 animation-name: warning-pulse，中间多一个 ing，动画就静默失败，控制台也不会报错。
- 检查大小写：CSS 里
warnPulse和warnpulse是两个不同名字 - 避免用连字符开头：
@keyframes -flash合法但容易误写成animation-name: flash，漏掉短横 - 推荐全小写 + 下划线，例如
warn_pulse，降低拼写误差
闪烁频率太快反而失去警示效果
人眼对 3–5Hz（即每秒闪 3–5 次）最敏感，但 CSS 动画周期设太短（如 0.2s），实际会因渲染帧率限制变成“持续亮”或“频闪不适”，尤其在低刷新率屏幕或旧设备上。
- 合理周期建议：用
animation-duration: 1.2s实现约 0.83Hz 的缓慢脉动，配合 opacity 变化更易察觉 - 别只调 duration：如果 keyframes 里从
opacity: 1突变到opacity: 0，加animation-timing-function: ease-in-out能缓解视觉冲击 - 移动端慎用
background-color直接跳变：部分安卓 WebView 对颜色硬切换渲染滞后，优先用opacity或box-shadow模拟闪烁
background-color 闪烁需注意颜色空间与可访问性
纯红（#ff0000）和纯黑（#000）交替，对比度高达 21:1，可能触发光敏癫痫风险；而灰底+浅黄闪，又可能在弱光下完全不可见。
- WCAG 建议闪烁频率低于 3Hz 或高于 50Hz，日常警示选 0.5–2Hz 更稳妥
- 避免使用
hsl(0, 100%, 50%) → hsl(0, 100%, 20%)这类明度剧烈变化，改用hsl(0, 90%, 48%) → hsl(0, 90%, 58%)微调更安全 - 务必加
prefers-reduced-motion: reduce媒体查询兜底，否则对开启系统减少动态效果的用户不友好
动画停在非初始状态会导致后续交互异常
比如表单提交失败后启动闪烁，用户点击重试按钮时，动画还没结束，background-color 停在高亮色上，按钮看起来像仍处于激活态，造成状态混淆。
- 用
animation-fill-mode: forwards时要小心：它会让最后一帧样式永久保留，应配合 JS 主动移除 class 或重置background-color - 更稳妥的做法是用
animation-iteration-count: 3明确次数，再通过animationend事件清理样式 - 不要依赖
animation-play-state: paused中断闪烁——暂停后恢复播放会从暂停点继续，不是从头开始
真正难的不是写出能闪的代码，而是让闪得恰到好处：不刺眼、不遗漏、不干扰、不违背系统偏好。这些细节藏在 keyframes 的百分比选择里，也藏在用户没打开开发者工具的那几秒里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
