HTML5无内置文字闪烁功能，须用CSS @keyframes定义opacity硬切换动画（0%/49%不透明→50%/100%全透明），配animation: blink 1s step-start infinite；禁用visibility/display切换以防重排，注意WCAG闪烁频率安全阈值（避开2–55Hz）及可访问性控制。
HTML5 本身没有内置“文字闪烁”功能，所谓闪烁效果必须用 CSS @keyframes 配合 animation 实现；直接用 <blink> 标签或 JavaScript 轮询修改 visibility 不仅过时、不可靠，而且在现代浏览器中已被禁用或忽略。
用 @keyframes 定义透明度切换动画
闪烁本质是视觉暂留下的“显隐交替”，最稳定的方式是控制 opacity 在 0 和 1 之间跳变。避免用 visibility: hidden/visible 或 display: none/block，它们会触发重排（reflow），导致布局抖动或文本宽度突变。
-
opacity动画只触发重绘（repaint），性能更好，且支持硬件加速 - 关键帧时间点建议设为
0%, 49%, 50%, 100%，而非简单的0%, 100%，否则容易因插值平滑导致“半透明残影”，失去“硬切换”的闪烁感 - 不要用
ease或ease-in-out缓动函数——闪烁需要的是阶跃式变化，应使用steps(1, start)或直接省略，靠关键帧硬切
animation 属性的必要参数组合
仅定义关键帧不够，必须通过元素的 animation 简写属性启用它。常见漏配项会导致动画不播放或只闪一次。
- 必须指定
animation-duration（如1s），值太小（如0.1s）人眼无法识别，太大（如3s）失去闪烁感 - 必须设
animation-iteration-count: infinite，否则默认只执行一次 - 推荐显式写
animation-timing-function: step-start，确保从不透明直接跳到完全透明，无过渡 - 避免遗漏
animation-fill-mode: forwards—— 虽然对无限循环影响不大，但若后续 JS 暂停动画，能保留在最后一帧状态
兼容性与可访问性风险提醒
即使代码能跑，也要注意两个现实约束：
立即学习“前端免费学习笔记（深入）”；
- Chrome、Firefox、Safari 均支持
@keyframes + opacity，但旧版 Android WebView（≤4.4）可能不支持steps()函数，建议降级为双关键帧硬切 - WCAG 2.1 明确禁止频率在 2–55 Hz 之间的闪烁内容（易诱发光敏性癫痫），
1s周期即 1 Hz，安全；但若设为0.3s（≈3.3 Hz），就属于高风险范围，必须提供关闭开关 - 屏幕阅读器不会“读出闪烁”，但频繁 opacity 变化可能干扰焦点管理，慎用于按钮、链接等交互元素
@keyframes blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
.blinking-text {
animation: blink 1s step-start infinite;
}
真正难的不是写出这段代码，而是判断该不该闪、闪多快、谁能看到它、以及用户是否能随时关掉它——这些不在 CSS 里，但在产品逻辑里。
