CSS导航栏悬停动画文字上移配合边框变色出现曲线偏移如何修复

问题根源 #

• 动画节奏错位：导航<a>元素与内部<p>元素的过渡时长存在10ms差值（a为0.17s、p为0.18s），同时两个元素都使用all作为过渡范围，垂直位移、边框颜色变化两个独立动画的运动节奏不同步，视觉上叠加后会产生文字沿弧线移动的错觉。
• 无效缓动规则：代码中使用的cubic-bezier(0, 0, 0, 0)无法实现匀速直线位移效果，进一步放大偏移感。
• 渲染抖动：未对执行transform变换的inline-block元素固定渲染锚点，部分浏览器合成图层时会产生轻微布局偏移，强化曲线视觉。

修复操作 #

1. 统一关联动画参数：让<a>的边框颜色过渡、<p>的垂直位移过渡使用完全相同的时长、延迟、缓动规则，消除节奏差。
2. 弃用all通配过渡：明确指定每个元素参与过渡的具体属性，避免触发非预期的样式变化。
3. 替换适配直线位移的缓动函数：选用匀速的linear作为缓动规则，保证位移过程为均匀垂直运动。
4. 固定变换原点：给执行位移的<p>元素明确设置变换中心，避免浏览器默认原点差异导致的渲染偏移。

修复后核心代码 #

/* 导航链接样式 */
.header .desktop-nav nav .norm_anker {
  /* 保留所有原有布局、颜色属性 */
  /* 仅对需要变化的边框颜色设置过渡 */
  transition: border-color 0.17s linear;
  transition-delay: 0.05s;
}

/* 内部文字样式 */
.header .desktop-nav nav .norm_anker p {
  /* 保留所有原有布局、文字属性 */
  /* 仅对需要变化的transform设置过渡，与a元素参数完全对齐 */
  transition: transform 0.17s linear;
  transition-delay: 0.05s;
  transform-origin: center center;
}

/* 保留原有hover交互规则 */
.header .desktop-nav nav .norm_anker:hover p {
  transform: translateY(-4px);
}
.header .desktop-nav nav .norm_anker:hover {
  border-color: #fff;
}

调整后，文字会严格沿垂直方向直线上移，底部边框颜色同步完成过渡，不会出现曲线偏移的视觉效果。

内容的提问来源于stack exchange，提问作者RANGO