推荐用 text-shadow + opacity 实现变色闪烁，避免直接改 color；opacity 闪烁需用 step-start 定时函数、完整声明各帧 text-shadow 层级，并控制时长 0.5–0.7s。
直接改 color 会触发重排，不推荐
很多人第一反应是用 @keyframes 动态切换 color 值，比如从 #000 到 #fff。这看似简单，但实际会导致浏览器频繁重绘甚至重排（尤其在旧版 Safari 或安卓 WebView 中），文字边缘容易发虚、动画卡顿明显。
真正轻量且兼容的做法是只动 opacity 或 text-shadow，它们属于合成层属性，GPU 加速友好。如果非要“变色”，优先走 text-shadow 叠加 + opacity 联动，而不是直接改 color。
opacity 闪烁必须用 step-start 才够“闪”
用 opacity 实现闪烁时，animation-timing-function 是关键。写成 ease-in-out 或默认 ease 会产生渐隐渐现的“呼吸感”，不是快闪；要模拟开关式闪烁，必须用 step-start。
-
animation: blink 0.6s step-start infinite;—— 每 0.6 秒硬切一次，无过渡 -
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }—— 注意不能只写两个状态（0% 和 50%），否则 50%→100% 段浏览器自动补插值，失去“闪”感 - 别漏
animation-fill-mode: forwards;，否则动画结束瞬间会回退到初始透明度
想“变色闪”？text-shadow 必须每帧写全所有层
常见错误：只在 0% 写一层阴影，在 50% 加一层，指望浏览器自动合并。实际结果是阴影忽强忽弱，甚至消失——因为 text-shadow 不支持增量更新，每一帧都得完整声明全部层级。
正确写法示例：
@keyframes color-flicker {
0% {
text-shadow: 0 0 4px rgba(255, 0, 100, 0.8), 0 0 8px rgba(255, 0, 100, 0.5);
opacity: 1;
}
50% {
text-shadow: 0 0 6px rgba(0, 200, 255, 0.9), 0 0 12px rgba(0, 200, 255, 0.7);
opacity: 0.95;
}
100% {
text-shadow: 0 0 4px rgba(255, 0, 100, 0.8), 0 0 8px rgba(255, 0, 100, 0.5);
opacity: 1;
}
}
要点：
- 所有帧都包含相同数量的
text-shadow层，只是参数不同 -
opacity配合微调（比如 1 → 0.95 → 1），避免纯黑/白背景下文字完全消失 - 时长建议 0.5–0.7s，太短像故障，太长失去提示性
iOS Safari 里闪烁卡顿？先查 will-change 和图层
不是代码错了，而是渲染策略问题。iOS Safari 对 text-shadow 动画优化较弱，尤其多层叠加时容易掉帧。
- 加
will-change: opacity;能提前触发合成层，但仅限当前元素，别批量加在父容器上 - 避免同时动
transform、text-shadow、opacity三者，优先保留后两者 - 测试时打开 Safari 开发者工具 → “Rendering” → 勾选 “Highlight Repaints”，看是否大面积高亮——红得越密，重绘压力越大
- 真要保兼容，降级方案：用
@supports (background-clip: text)包住高光方案，不支持时 fallback 到opacity闪烁
color 属性本身折腾，反而绕远路。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
