导航下划线抖动主因是像素对齐失效与重排触发；应优先用 transform: scaleX 配合 transform-origin 实现GPU加速动画，其次确保 position: relative 和 box-sizing: border-box，再辅以 will-change 与字体抗锯齿优化。
导航 hover 下划线抖动，通常是因为下划线元素（比如伪元素 ::after）的宽度或位置在动画起始/结束时没有精确对齐，导致浏览器重排或像素四舍五入引发的视觉跳变。用 transition: width 配合 left 控制，确实可行，但关键不在“用了 transition”，而在于**起点、终点的数值必须可被像素整除且不触发 layout 变化**。
确保下划线容器有明确的 position: relative
被 hover 的导航项（如 a 或 li）必须设 position: relative，否则伪元素的 left 和 width 会相对于最近定位祖先计算，容易错位。
- 不加
position: relative→::after的left: 0可能从 body 左侧开始算，宽度也不匹配文字实际宽度 - 加上后，
left: 0和width: 100%才真正对应当前链接的内盒尺寸
用 transform 替代 width + left（更推荐）
直接过渡 width 和 left 容易因字体渲染、缩放、DPR 导致小数像素，引发抖动。更稳妥的方式是固定下划线宽度（如 width: 100%），只用 transform: scaleX(0) → scaleX(1)，配合 transform-origin: left center 控制伸展方向：
-
scaleX是合成属性，不触发重排，GPU 加速，动画更顺滑 - 无需手动算
left值，避免因 padding/margin 计算偏差 - 示例：
transition: transform 0.3s ease;+transform: scaleX(0);初始态
如果坚持用 width + left，请做这两件事
若业务限制必须用 width/left（比如要实现从中间向两边展开），请确保：
立即学习“前端免费学习笔记（深入）”；
- 初始状态设
width: 0; left: 50%;，动画中用width: 100%; left: 0;—— 这样 left 不参与过渡，只靠 width 拉伸，减少变量干扰 - 给父元素（导航项）加
will-change: width;（仅 hover 时加），提示浏览器提前优化渲染层 - 避免在
font-size或padding上用 rem/em 等相对单位做动态变化，防止布局浮动
检查字体抗锯齿与设备像素比
某些 macOS + Chrome 组合下，文字边缘模糊会导致下划线左右 1px 抖动。可尝试：
- 给导航文字加
-webkit-font-smoothing: antialiased; - 下划线伪元素加
backface-visibility: hidden;或translateZ(0)强制硬件加速 - 在 CSS 中显式设置
box-sizing: border-box;，避免 padding 影响 width 计算
基本上就这些。抖动不是 transition 写错了，而是尺寸锚点没锁死。优先用 transform，其次保 position 和 box-sizing，再辅以 will-change 和抗锯齿微调 —— 平滑感立马回来。
