根本原因是GPU双线性插值处理文字纹理导致发虚；应优先采用整数像素对齐策略，如用left/top+margin替代translate(-50%,-50%)，或JavaScript四舍五入坐标，避免非整数缩放。
transform 导致文字模糊的根本原因
不是动画本身有问题，而是浏览器在执行 transform 时，把文字渲染从 CPU 主线程移交到了 GPU 合成层。GPU 对纹理做缩放/位移时默认启用双线性插值（bilinear filtering），而文字这种高对比度边缘内容一插值就发虚——本质是「用图片的平滑逻辑处理文字」。
典型触发点包括：translate(-50%, -50%) 居中、scale(1.2) 缩放、rotate(3deg) 小角度旋转，尤其当元素宽高为奇数或百分比计算后落点非整数像素时，模糊更明显。
translateZ(0) 能缓解但不等于万能解
translateZ(0) 的作用是强制创建独立合成层（compositing layer），绕过部分 CPU 渲染路径。但它只是“换了一条路走”，并不改变 GPU 插值行为——所以有时变清晰，有时反而更糊，取决于设备 GPU 驱动和浏览器版本。
实际使用要注意三点：
立即学习“前端免费学习笔记（深入）”；
- 只对真正需要动画的元素加，避免全页面滥用导致内存暴涨
- 它不能修复因
transform-origin或父容器尺寸导致的亚像素偏移 - 在 Safari 上效果不稳定，在某些 Android WebView 中甚至无效
真正有效的整数像素对齐策略
模糊的核心是「坐标没对齐物理像素」，所以最可靠的是让变换结果落在整数像素上：
- 居中时不用
translate(-50%, -50%)，改用left: 50%; top: 50%; margin-left: -100px; margin-top: -50px;（前提是已知宽高） - 动态场景下用 JavaScript 计算并 round 到整数：
el.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)` - 缩放优先用整数倍（
scale(2)）或 0.25 倍数（scale(1.25)），避开 1.3、1.7 这类易插值失真的比例
backface-visibility: hidden 是隐藏副作用，不是修复渲染
backface-visibility: hidden 之所以常被推荐，是因为它会间接触发合成层重建，并重置某些 GPU 纹理缓存状态——相当于“重启渲染管线”。但它不解决像素对齐问题，也不提升字体渲染质量。
如果你发现加了它就变清晰，大概率是同时触发了以下任一条件：
- 浏览器重新分配了合成层，避开了之前那个出问题的纹理采样上下文
- 它和
will-change: transform搭配使用，让浏览器提前预分配资源，减少运行时插值误差 - 你恰好在移动端测试，而该属性在部分 Android Chrome 版本中会强制降级到 CPU 渲染路径
别把它当成字体抗锯齿开关；它只是个副作用可控的“刷新键”，用完记得评估是否真有必要长期保留。
