如何实现鼠标悬停时文本颜色块穿梭填充的动画效果？

嘿，我完全get到你想要的效果——鼠标悬停在导航文本上时，红色高亮先从左到右填满整个文本，接着再从左侧开始“收回去”，最终回到初始状态对吧？你的原代码只实现了填充的单向动画，要达成这种来回的效果，我们可以用CSS关键帧动画（@keyframes）来精准控制伪元素的尺寸和位置，不用折腾transform或者mix-blend-mode，下面给你两种可行方案：

方案1：文本颜色覆盖式（贴合你原代码思路） #

这种方案用伪元素的红色文本覆盖原文本，动画时先显示完整红色文本，再从左侧隐藏回去，适配导航菜单的多条目复用：

.text {
  position: relative;
  display: inline-block; // 适配导航菜单的行内布局
  color: #333; // 默认文本颜色
  cursor: pointer;
  overflow: hidden; // 限制伪元素的显示范围

  &::before {
    // 用data-text属性动态获取文本，不用硬写内容，适配多个导航项
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: red; // 高亮颜色
    white-space: nowrap;
    width: 0;
    overflow: hidden;
    transition: none; // 禁用默认过渡，改用关键帧动画
  }

  &:hover::before {
    // 触发填充再反向清空的动画，总时长700ms（填充和清空各350ms）
    animation: fillAndReverse 700ms ease-in-out forwards;
  }
}

// 定义分阶段动画
@keyframes fillAndReverse {
  // 初始状态：完全看不到红色文本
  0% {
    width: 0;
    left: 0;
  }
  // 中间状态：红色文本完全覆盖原文本（填充完成）
  50% {
    width: 100%;
    left: 0;
  }
  // 结束状态：红色文本从左侧完全移出视野（清空完成）
  100% {
    width: 0;
    left: 100%;
  }
}

对应的HTML写法（方便导航菜单复用）：

<span class="text" data-text="HOME">HOME</span>
<span class="text" data-text="ABOUT">ABOUT</span>
<span class="text" data-text="CONTACT">CONTACT</span>

方案2：背景色块穿梭式 #

如果你想要的是背景色块在文本下方穿梭的效果（而非文本颜色替换），可以调整伪元素为纯背景色，文本保持在上方：

.text {
  position: relative;
  display: inline-block;
  color: #333;
  cursor: pointer;
  padding: 2px 6px; // 给背景色块留点内边距，视觉更舒服
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background-color: red; // 高亮背景色
    z-index: -1; // 放在文本下方，不遮挡文字
    transition: none;
  }

  &:hover::before {
    animation: bgFillReverse 700ms ease-in-out forwards;
  }
}

@keyframes bgFillReverse {
  0% {
    width: 0;
    left: 0;
  }
  50% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 0;
    left: 100%;
  }
}

为什么你的尝试没生效？ #

你之前试的平移、修改left/right或者transform-origin没成功，是因为单独的transition只能控制单一方向的属性变化，没法实现“先扩展再收缩”的分阶段逻辑。而关键帧动画可以精准定义多个时间点的元素状态，完美适配这种需要两个阶段的动画需求。

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