直接用transition配合:hover可实现文字颜色过渡，但易糊、跳、失真，主因是字体渲染与重排未控；color过渡正常，但font-size/font-weight在旧safari中可能不触发重绘，推荐改用opacity+transform模拟过渡感并启用gpu加速。
直接用 transition 配合 :hover 就能实现，但文字过渡容易糊、跳、失真——核心问题是字体渲染和重排机制没被控制好。
为什么单纯加 transition: color 0.3s 有时没反应
浏览器对文字颜色、字号、字体族等属性的过渡支持良好，但以下情况会失效或异常：
-
color过渡正常，但font-size或font-weight在部分旧版 Safari 中不触发重绘 - 父容器用了
transform: translateZ(0)或will-change: transform，却没给文字元素单独设backface-visibility: hidden，导致子文字模糊 - 菜单项是
<a></a>标签但没设display: inline-block或display: block，:hover作用域不明确
推荐写法：用 opacity + transform 替代文字本身变形
比起动 font-size 或 letter-spacing，更稳妥的是用视觉位移+透明度模拟“文字过渡感”：
.menu-item {
display: inline-block;
position: relative;
padding: 8px 16px;
color: #333;
transition: opacity 0.25s ease, transform 0.25s ease;
}
<p>.menu-item:hover {
opacity: 0.8;
transform: translateY(-2px);
}</p><p>/<em> 可选：加伪元素做下划线渐显 </em>/
.menu-item::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #007bff;
transition: width 0.3s ease;
}</p><p>.menu-item:hover::after {
width: 100%;
}</p>
这样避免触发 layout，GPU 加速也更稳定。
text-shadow 过渡要小心抗锯齿抖动
想用阴影制造“发光”过渡效果时，text-shadow 的过渡在 Chrome/Firefox 表现尚可，但在 Safari 容易出现边缘闪烁：
- 别写
text-shadow: 0 0 0 #fff→text-shadow: 0 0 8px #fff，中间值会生成大量半透明像素，拖慢渲染 - 如果必须用，加上
-webkit-font-smoothing: antialiased和backface-visibility: hidden降低抖动 - 更轻量的替代方案：用
filter: drop-shadow()，它走 GPU，且支持transition（但 IE 不支持）
真正卡住的点往往不是过渡写法，而是菜单容器有 overflow: hidden 却没预留 transform 空间，或者用了 flex 布局但子项没设 align-self: flex-start，导致 hover 时位置微偏——这些细节比动画参数更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
