CSS动画无法移动nav标签内子元素 仅颜色属性生效问题求助

问题根因 #

• left属性需要元素设置非static的定位属性（如relative、absolute）才能生效，当前<a>标签无对应定位配置，left: 0规则无效
• <a>标签默认是行内元素，transform属性对行内元素兼容性差，无法正常触发位移效果
• 动画关键帧规则前后属性不统一，from用left、to用transform，会导致动画插值逻辑异常

修复代码 #

CSS修改 #

/* 统一用transform实现位移，性能更高，无需额外设置定位 */
@keyframes MoveStockTORIght {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

.SiteNav {
  overflow: hidden;
  text-align: center;
  margin: auto;
}

.SiteNav a {
  display: inline-block; /* 改为行内块元素，支持transform属性 */
  gap: 10%;
  padding: 1%;
}

JS可选优化 #

原有逻辑通过删除再追加DOM触发动画重绘，性能开销大，可以用以下方案替代，无需修改DOM结构：

function DoAnimation(animation, a) {
  if (animation != null) {
    // 先重置动画
    a.style.animationName = 'none';
    // 主动触发重排，让浏览器识别动画重置操作
    void a.offsetWidth;
    a.style.animationName = animation;
    a.style.animationDuration = "2s";
    console.log(1);
  }
}

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