transition本身不直接导致文字模糊，真正触发模糊的是它隐式启用的transform（如translate、scale）和合成层提升机制；关键在于控制像素对齐、避免非整数位移与不必要的3D管线介入。
transition 本身不直接导致文字模糊，真正触发模糊的是它背后隐式启用的 transform（尤其是 translate、scale）和合成层提升机制。关键在控制像素对齐与避免不必要的3D管线介入。
为什么 transition 会让文字变糊？
浏览器对 transition 的优化策略是：只要目标属性涉及 transform 或 opacity，就会自动把元素提升为独立合成层（Composite Layer）。一旦进入该层：
- 文本渲染从主线程的 subpixel-antialiased 模式，切换到 GPU 的纹理采样路径
- 非整数位移（如
translateY(-50%)在奇数高度下算出 237.5px）会强制亚像素插值 - 若祖先有
transform-style: preserve-3d或小perspective，还会叠加 3D 重采样误差
避免模糊的核心操作：禁用隐式 3D + 强制整数像素
不要只盯着 transition 写法，重点约束它驱动的 transform 值：
- 用
transform: translate(10px, 0)替代transform: translate(10.5px, 0)—— 所有数值保持整数 - 居中时避开
translate(-50%, -50%)，改用top: 50%; left: 50%; margin-top: -XXpx; margin-left: -XXpx;（XX 为整数） - 彻底移除父级的
transform-style: preserve-3d，除非子元素真需要 3D 空间关系 - 删掉无意义的
perspective，或设为 ≥300px（如perspective: 400px）
针对 transition 触发场景的补救写法
当必须用 transition 驱动 transform 且无法改布局时，加一层「像素对齐兜底」：
.fuzzy-trigger {
transition: transform 0.3s ease;
/* 强制回退到 CPU 渲染文本，绕过 GPU 插值 */
will-change: auto;
/* 或更直接：关闭硬件加速，仅对文本敏感场景用 */
transform: translateZ(0) scale(1);
}
<p>.fuzzy-trigger::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
/<em> 用伪元素占位，让浏览器优先对齐它的边界 </em>/
pointer-events: none;
}
</p>
注意：will-change: transform 是模糊的加速器，不是解药；transform: translateZ(0) 会开启 3D 上下文，反而加重问题 —— 这类写法只在极少数调试场景临时使用。
容易被忽略的复合陷阱
模糊常出现在「看似没动」的元素上，比如：
- 一个
position: fixed的弹窗，内部transition: opacity—— 它仍会被提升为合成层，连带子文本降质 - 父容器用了
scale(0.95)，子元素即使没写transform，也会继承缩放导致的纹理分辨率损失 - 移动端 Safari 对
transition中的transform有额外插值平滑逻辑，小角度旋转（如rotate(0.5deg)）比 Chrome 更易糊
最稳妥的做法，是把文字容器和动画容器拆开：动画只作用在包裹层，文字用 position: relative + z-index 单独浮在顶层，避开合成层污染。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
