闪烁动效已遭所有主流浏览器废弃，应使用css @keyframes模拟，推荐opacity切换并设1s无限循环；需用animationplaystate控制启停；必须响应prefers-reduced-motion并提供无障碍替代方案。
闪烁动效在现代浏览器中已被禁用
直接用 text-decoration: blink 或 HTML 的 <blink></blink> 标签已完全失效——所有主流浏览器（Chrome、Firefox、Safari、Edge）早在 2010 年代初就移除了对它的支持。这不是兼容性问题，而是明确废弃的特性，代码写了也毫无反应。
用 CSS @keyframes 模拟闪烁最可靠
真正可控、可维护的方式是手写关键帧动画。核心思路是切换 opacity 或 visibility，避免影响布局流。
- 推荐用
opacity: 0→opacity: 1，比visibility: hidden更平滑，且不会触发重排 - 动画时长建议设为
1s左右，太快易致眩晕，太慢失去“闪烁”感知 - 必须显式加
animation-iteration-count: infinite，否则只闪一次 - 不要用
animation-timing-function: steps(1)模拟硬切——它在 Safari 上有渲染抖动风险
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.2; }
}
.blinking {
animation: blink 1s infinite;
}
然后在段落中给目标文字加 <span class="blinking">实时价格：¥299</span> 即可。
JavaScript 控制启停要绕开 setInterval
如果需要用户交互控制（比如点击暂停/恢复），别用 setInterval 频繁 toggle class——这会导致动画状态错乱、性能浪费。
- 用
element.style.animationPlayState = "paused"直接控制播放状态，精准且无副作用 - 注意：该属性不触发重绘，但需确保初始 CSS 中已定义
animation，否则无效 - 若需动态启停多个元素，优先用 class 切换 +
CSS @media或:hover做降级，而非 JS 驱动
无障碍与可用性必须处理
闪烁动效对光敏性癫痫患者存在风险，WCAG 明确要求禁止 3Hz–45Hz 范围内的闪烁。即使只是装饰性动效，也得留退路：
- 务必监听
prefers-reduced-motion媒体查询，在用户开启系统“减少动画”时自动关闭 - 示例：
@media (prefers-reduced-motion: reduce) { .blinking { animation: none; } } - 不要依赖 JS 检测——CSS 媒体查询更早生效、更可靠
- 如果闪烁承载关键信息（如告警状态），必须提供非视觉替代方案（如文字标注、颜色+图标组合）
动效本身很简单，但真正落地时，禁用逻辑、启停控制、无障碍适配这三处最容易被跳过，一漏就可能引发合规或体验问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
