根本原因是动画触发图层分离导致亚像素抗锯齿退化为灰度抗锯齿；transform/opacity等属性使文字进入独立gpu合成层，失去subpixel渲染能力，-webkit-font-smoothing随之失效。
根本原因不是动画本身，而是动画触发了浏览器的图层分离机制，让文字从主渲染线程被拎进独立 GPU 合成层，从而强制关闭亚像素抗锯齿（subpixel AA），退化为灰度抗锯齿（grayscale AA）。
transform / opacity 动画直接导致合成层升级
只要对含文字的元素设了 transform、opacity、filter 或 will-change: transform，浏览器就会把它提升为独立合成图层。此时：
- 文字不再走主渲染管线，失去字体 hinting 和 subpixel 渲染能力
- GPU 纹理插值替代了文本光栅化，小字号笔画变细、粗体感丢失、边缘发虚
- 在 macOS Safari/Chrome 中最明显——文字突然“变细”；Windows Chrome 则易出毛边和色边
- DevTools 的
Layers面板里看到文字区域标红，就说明已失效
为什么 -webkit-font-smoothing 在动画中基本无效
这个属性只在文字未被提升图层时起作用，一旦进入 GPU 合成层，它就被渲染策略覆盖：
-
-webkit-font-smoothing: subpixel-antialiased在 macOS 有效，但 Windows 和 Android WebView 完全忽略 -
-webkit-font-smoothing: antialiased强制降级为灰度模式，反而让小字号更糊、更细 - 加了
!important也没用——不是优先级问题，是浏览器根本不读这条规则 - Firefox 完全不支持该属性，得靠
-moz-osx-font-smoothing: grayscale单独配
真正可控的修复点不在文字上，而在动画结构
别试图“修文字”，要阻止文字被单独拎走：
- 把
transform写在父容器上（比如.card:hover .card-title→ 改成.card:hover加transform） - 避免对
<h2></h2>、<p></p>这类纯文本元素直接设will-change或backface-visibility: hidden - 必须缩放文字？改用
font-size+transition，性能稍低但渲染质量稳 - 删掉所有非整数 translate 值（如
translateX(50%)在奇数宽容器中会算出 99.5px）
最容易被忽略的是：动画结束后的“恢复期”——哪怕动效已停，图层可能仍保持分离状态，文字持续模糊。这时候需要主动触发重绘（比如临时加个 transform: translateZ(0.1px) 再移除），或等浏览器自动合并图层，这个过程不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
