求助：CSS动画实现Hover时文字从右侧滑入的问题

我研究这个示例代码很久了，想要实现两种文字滑入效果：鼠标悬停时文字从左侧滑入和从右侧滑入。目前已成功实现左侧滑入效果，本以为反转代码就能实现文字从右侧滑入并停在左侧，但却遇到了问题，尝试将CSS中的forwards改为reverse也没有效果。

你的核心问题在于对reverse动画方向的理解有误，同时右侧滑入的关键帧和初始状态设置逻辑混乱。以下是具体修复步骤：

• 放弃混用动画与transform：你同时用了animation和直接设置transform，这会导致样式冲突，应该只通过动画控制位移效果。
• 重新定义右侧滑入的关键帧：右侧滑入的文字初始应该处于容器右侧外部（translateX(100%)），悬停时移动到容器内（translateX(0)），需要对应调整关键帧的起始和结束状态。
• 正确使用forwards填充模式：reverse的作用是倒播已定义的动画，而非保留动画结束状态。要让动画结束后停在目标位置，必须使用forwards。

修正后的完整代码 #

CSS代码 #

.slide-con {
  width: 100%;
  overflow: hidden;
  height: 200px;
  max-width: 100%;
  background: #eee;
  position: relative; /* 让内部元素定位更可控 */
}

/* 通用初始状态：隐藏文字，设置过渡 */
.slide-con > div {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: absolute; /* 让两个文字可以分别定位 */
  top: 50%;
  transform: translateY(-50%); /* 垂直居中 */
}

/**************************************
左侧滑入
**************************************/
.slide-con .slide-left {
  animation: 0.5s slide-left-out forwards;
}
.slide-con:hover .slide-left {
  animation: 0.5s slide-left-in forwards;
  opacity: 1;
}

/**************************************
右侧滑入
**************************************/
.slide-con .slide-right {
  animation: 0.5s slide-right-out forwards;
  right: 0; /* 初始在右侧 */
}
.slide-con:hover .slide-right {
  animation: 0.5s slide-right-in forwards;
  opacity: 1;
}

/**************************************
动画关键帧
**************************************/
@-webkit-keyframes slide-left-in {
  from { transform: translateX(-100%) translateY(-50%); }
  to { transform: translateX(0) translateY(-50%); }
}
@-webkit-keyframes slide-left-out {
  from { transform: translateX(0) translateY(-50%); }
  to { transform: translateX(-100%) translateY(-50%); }
}

@-webkit-keyframes slide-right-in {
  from { transform: translateX(100%) translateY(-50%); }
  to { transform: translateX(0) translateY(-50%); }
}
@-webkit-keyframes slide-right-out {
  from { transform: translateX(0) translateY(-50%); }
  to { transform: translateX(100%) translateY(-50%); }
}

/* 兼容标准写法 */
@keyframes slide-left-in {
  from { transform: translateX(-100%) translateY(-50%); }
  to { transform: translateX(0) translateY(-50%); }
}
@keyframes slide-left-out {
  from { transform: translateX(0) translateY(-50%); }
  to { transform: translateX(-100%) translateY(-50%); }
}

@keyframes slide-right-in {
  from { transform: translateX(100%) translateY(-50%); }
  to { transform: translateX(0) translateY(-50%); }
}
@keyframes slide-right-out {
  from { transform: translateX(0) translateY(-50%); }
  to { transform: translateX(100%) translateY(-50%); }
}

HTML代码 #

<div class="slide-con">
  <div class="slide-left">从左侧滑入的文字</div>
  <div class="slide-right">从右侧滑入的文字</div>
</div>

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