应避免直接修改color属性触发重排，推荐用opacity+background-clip:text实现伪颜色闪烁，并配合text-shadow模拟霓虹效果，注意兼容性、动画节奏与终止控制。
直接改 color 属性会触发重排，别这么做
很多人第一反应是用 @keyframes 动画反复切换 color 值，比如从 #ff0 到 #000。这看似简单，但实际会导致浏览器频繁重排（reflow），尤其在文字嵌套在 flex/grid 容器中时，可能引发布局抖动或卡顿。更糟的是，color 变化无法硬件加速，移动端掉帧明显。
用 opacity + background-clip: text 实现“伪颜色闪烁”
真正稳定、高性能的做法是：保持 color: transparent，用渐变背景 + background-clip: text 控制“可见色”，再靠 opacity 控制整体明暗节奏。这样既规避了重排，又保留了色彩控制自由度。
- 必须加
display: inline-block或inline-flex，否则background-clip: text不生效 -
@supports (background-clip: text)包裹高亮逻辑，Firefox 默认不支持，降级 fallback 用纯opacity动画 - 动画只作用于
opacity，时长建议 0.6s～1.2s，避免低于 0.5s（易诱发光敏反应） - 不要设
infinite—— 多数提示类场景只需闪一次，用 JS 移除 class 更可控
text-shadow 配合 opacity 才算真“霓虹闪烁”
如果目标是类似霓虹灯的发光闪烁，单靠 color 切换毫无辉光感。必须用 text-shadow 叠加 + opacity 同步变化，否则会出现“字先消失、光还留着”的割裂现象。
- 最多用两层
text-shadow：例如0 0 4px rgba(255, 255, 0, 0.7), 0 0 8px rgba(255, 0, 255, 0.5)，避免四层以上糊边 - 关键点：
@keyframes中opacity和text-shadow必须同帧变化，不能一个动一个不动 - 深色背景上效果最稳；浅色背景需加
background: #000局部衬底，否则辉光被吃掉 - 安卓 WebView 对多层
text-shadow渲染不稳定，上线前务必真机测试
step-start 动画节奏容易误用
有人用 animation-timing-function: step-start 模拟硬切闪烁，结果发现文字“卡住半秒再跳变”，体验生硬。这不是 bug，而是 step-start 在首帧就取终值，导致 0%→50% 阶段无过渡。
- 正确做法是删掉
step-start，改用linear或cubic-bezier(.2, .8, .4, 1) - 若坚持硬切感，用
steps(1, end)配合opacity的 0%→100% 瞬变，但仅限逐字闪烁等特殊场景 - 所有动画必须声明
animation-fill-mode: forwards，否则结束瞬间opacity回退到 1，失去“闪完即停”效果
animationend 监听，导致 class 残留、后续交互失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
