color动画必然触发重绘，因文字颜色变化需重新栅格化字体像素，无法GPU加速；应改用两层文字叠加+opacity切换模拟，全程仅触发合成。
color 动画为什么必然触发重绘
直接改 color 属性会强制浏览器进入重绘（repaint）阶段，但不会触发重排（reflow）。问题在于：重绘本身不 cheap——尤其在移动端，文字渲染涉及字体栅格化、抗锯齿、子像素定位等 CPU 密集操作。一次 color 变化，浏览器得重新绘制整个文本区域的像素，而这个过程无法被 GPU 合成层接管。
常见错误现象：@keyframes 里写 color: #333 → #f00，动画一跑，FPS 掉到 40 以下，Paint flashing 区域随文字高亮闪烁；用 Chrome 的 Rendering 面板开 “Paint flashing”，能看到每一帧都在大面积重绘。
- 所有基于
color、background-color、border-color、text-shadow的动画都属于重绘类，性能天花板低 -
opacity是合成属性，改它只走 GPU 混合，不重绘；transform同理，只挪纹理，不动像素 - 别信“只是改个颜色而已”——低端安卓机（Android 5–7 WebView）上，
color动画帧率常低于 25fps，手指滑动时能明显感知粘滞
用 opacity 叠加模拟 color 动画更稳
真正可落地的替代方案不是“优化 color”，而是绕过它：用两层相同文字，不同颜色，靠 opacity 切换显隐。这样动画全程只动 opacity，100% 走合成线程。
实操要点：
立即学习“前端免费学习笔记（深入）”；
- 外层容器设
position: relative，两层文字都绝对定位、尺寸一致、内容相同 - 初始状态：第一层
opacity: 1，第二层opacity: 0 - 动画时只改两个
opacity值（如0 → 1和1 → 0），CSS 写成transition: opacity 0.3s - 避免用
display: none或visibility: hidden控制显隐——它们会破坏图层缓存，导致每次动画都重建绘制上下文
示例片段：
.text-fade {
position: relative;
}
.text-fade .base { color: #333; }
.text-fade .alt { color: #f00; position: absolute; top: 0; left: 0; }
.text-fade:hover .base { opacity: 0; }
.text-fade:hover .alt { opacity: 1; }
.text-fade .base,
.text-fade .alt {
transition: opacity 0.3s ease;
}
will-change 对 color 动画完全无效
will-change: color 是非法值，浏览器会直接忽略。CSS 规范里只接受 transform、opacity、scroll-position 和 contents 这四个关键字。试图写 will-change: color 不仅没加速，还可能因解析失败引发样式表重载。
更危险的是误用：will-change: transform 加在文字容器上，本意是“我要动”，结果却让浏览器给整段文字建了独立图层——但文字本身仍要重绘，图层只是把重绘框锁死了，内存占用涨了，帧率没变。
- 真要用
will-change，只对动画中实际变化的属性设，且必须动态控制：JS 中动画开始前 1–2 帧设el.style.willChange = 'opacity'，结束立刻清空 - 静态写死
.text { will-change: opacity; }在列表项上？安卓低端机滚动时极易 OOM - 别用
transform: translateZ(0)强提层来“拯救”color动画——它解决不了重绘问题，只白占 GPU 内存
哪些场景下 color 动画其实可以忍
不是所有 color 动画都必须砍掉。如果满足全部以下条件，它对主线程压力小到可忽略：
- 动画元素极少（单页 ≤ 3 个）、且不随滚动出现/消失
- 动画时长 ≥ 300ms，避免高频重绘（≤ 16ms 的极短动画在 iOS Safari 上甚至不触发
animationend） - 文字无阴影、无描边、字体大小 ≤ 16px、使用系统默认字体栈（如 -apple-system, sans-serif）
- 页面其他地方没同时跑
transform+box-shadow+filter组合动画（这些会挤占合成资源）
但只要其中一条不满足，就该切回 opacity 叠加方案。最常被忽略的点是：你以为只动了一个按钮的文字色，但它背后正有轮播图在跑 transform + opacity，两者共用合成资源，color 动画就成了压垮帧率的最后一根稻草。
