17370845950

HTML5无内置文字闪烁功能，须用CSS @keyframes定义opacity硬切换动画（0%/49%不透明→50%/100%全透明），配animation: blink 1s step-start infinite；禁用visibility/display切换以防重排，注意WCAG闪烁频率安全阈值（避开2–55Hz）及可访问性控制。

HTML5 本身没有内置“文字闪烁”功能，所谓闪烁效果必须用 CSS @keyframes 配合 animation 实现；直接用 标签或 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 里，但在产品逻辑里。