纯 CSS 闪烁动画唯一推荐用 @keyframes + opacity；visibility/display 切换会触发重排、不支持缓动、兼容性差，且无法 GPU 加速。
纯 CSS 实现闪烁动画最可靠，@keyframes + opacity 是唯一推荐路径；用 visibility 或 display 切换会触发重排，卡顿明显，且无法 GPU 加速。
为什么不用 visibility: hidden 做闪烁
它会让元素彻底脱离渲染流，每次切换都强制浏览器重排（reflow），尤其在列表、表格或密集 DOM 中，帧率直接掉到 20fps 以下。更关键的是：它不支持 CSS 动画缓动（animation-timing-function），无法做呼吸感或渐变节奏。
-
visibility切换是“硬切”，没有中间态，视觉生硬 - 移动端 Safari 和部分安卓 WebView 对
visibility动画支持不稳定，可能完全不生效 - 若需暂停/恢复动画，
visibility方案必须靠 JS 控制 class，而opacity可直接用animation-play-state: paused
@keyframes blink 的基础写法与常见错误
最简可用版本是：
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}
但实际项目中容易踩坑：
- 别写成
0% { opacity: 1; } 100% { opacity: 0; }—— 这样只有“亮→灭”单向过程，缺回弹，人眼感知是“消失”而非“闪烁” - 避免用
linear缓动：默认就是linear，会导致明暗切换像开关电源，加animation-timing-function: ease-in-out更自然 - 别在
@keyframes里写animation-timing-function—— 它只对应用该动画的元素有效，写在@keyframes内部会被忽略 - 若元素本身有
opacity初始值（比如0.8），动画会从该值开始插值，导致闪烁幅度变小；建议显式设opacity: 1在基础样式中
如何控制闪烁频率、次数和交互触发
CSS 动画本身不支持“闪 3 次就停”，但可通过组合手段实现：
- 有限次闪烁：用
animation-iteration-count: 3+animation-fill-mode: forwards，再配合 JS 在结束后移除 class 防止残留 - 鼠标悬停启动：给元素加
:hover伪类，覆盖animation-play-state: running，初始设为paused - 点击切换状态：用
element.classList.toggle('is-blinking')控制 class，CSS 中定义.is-blinking { animation: blink 0.8s infinite; } - 动态调速：JS 改
element.style.animationDuration = '1.2s'比反复 clearInterval + setInterval 更稳，也避免 requestAnimationFrame 内存泄漏
OLED 屏幕与深色背景下的闪烁适配
在黑色背景上用高饱和色（如 #00aaff）做闪烁，OLED 屏幕会出现子像素溢出，文字边缘发虚。这不是 bug，是物理特性：
- 解决办法一：改用低饱和度色值，比如
#4a90e2替代#00aaff - 解决办法二：叠加轻微
text-shadow: 0 0 2px rgba(74, 144, 226, 0.3)，能柔化光晕边界 - 解决办法三：避免纯黑背景，用
#0a0a0a或#121212替代#000，降低对比度压感 - 额外注意：某些安卓低端机对
opacity动画掉帧严重，可加will-change: opacity提前提示合成器，但别滥用，否则反而增加内存开销
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
