应使用 CSS @keyframes 实现闪烁，定义 0%→100% 硬切 opacity 的 blink 动画，配合 step-start 和 animation-fill-mode 精确控制次数与状态，避免 JS 直接操作 opacity 或高频闪烁，兼顾可访问性与用户体验。
别用 <blink> 标签——它早已被所有现代浏览器移除，强行写进去只会被忽略，还可能触发控制台警告。
用 CSS @keyframes 实现稳定闪烁
这是当前最可靠、兼容性最好（Chrome/Firefox/Safari/Edge 全支持）的方式。核心是控制 opacity 在 0 和 1 之间硬切，避免渐变过渡带来的“虚影感”。
-
@keyframes blink必须定义 0%→100% 的完整周期，且关键帧要明确分离：比如0%, 49% { opacity: 1; }和50%, 100% { opacity: 0; } - 动画属性推荐写成：
animation: blink 1s step-start infinite——step-start确保切换瞬间完成，不是淡入淡出 - 如果想闪 3 次就停，把
infinite换成3，再加animation-fill-mode: forwards保持最终状态
为什么不能只靠 transition + JS 控制闪烁次数
单纯靠 transition 配合 JS 反复改 style.opacity 容易失步：定时器误差、重排重绘延迟、或用户切页导致动画中断，最终闪的次数对不上。
- 更稳妥的做法是用 JS 动态添加/移除 class，让 CSS 动画接管节奏，例如：
el.classList.add('blink-3x')，对应 CSS 中定义.blink-3x { animation: blink 0.6s 3; } - 避免在循环里直接操作
el.style.opacity，尤其不要用setInterval配Math.random()改颜色——这不属于“闪烁”，而是乱跳色，可访问性极差
警惕 accessibility 和用户体验陷阱
WCAG 2.1 明确要求：任何 1 秒内闪烁超过 3 次的内容，必须提供关闭机制。浏览器也会对高频闪烁（如 animation-duration: 0.2s）主动降频或禁用。
立即学习“前端免费学习笔记（深入）”；
- 提示类文字建议用
1.2s ~ 2s周期，既明显又不刺眼；错误提示可短些（0.8s），但绝不低于0.5s - 别给正在输入的
<input>或焦点元素加闪烁——会干扰键盘导航和屏幕阅读器 - 深色背景上闪浅色字比浅色背景闪深色字更安全，后者容易触发光敏性癫痫风险
真正难的不是让字动起来，而是判断它该不该闪、闪多久、谁能看到它——这些没法靠一行 animation 解决。
