取消悬停时如何反转CSS过渡效果？求纯CSS解决方案

我制作了一个简单的动画，但取消悬停时，设置了过渡的span元素直接消失。请问有没有简便方法让这些span滑回原位，也就是在取消悬停后反转过渡效果？若必要，复杂方法也可接受。最好能提供纯CSS的解决方案，提前致谢！

原代码 #

CSS

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#wrapper {
  position: relative;
  font-family: 'Courier New', Courier, monospace;
}

#wrapper h2 {
  font-size: 8rem;
  margin: 0px;
}

#wrapper:hover span:first-of-type {
  visibility: visible;
  transform: translate(0%, 0%);
}

#wrapper:hover span:last-of-type {
  transform: translate(0%, 0%);
  visibility: visible;
}

#wrapper span {
  font-size: 8rem;
  font-weight: bold;
  transition: transform 1s;
}

#wrapper span:first-of-type {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
  transform: translate(-10%, -100%);
  visibility: hidden;
  background: linear-gradient(45deg, #00ff00, #00ff80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#wrapper span:last-of-type {
  position: absolute;
  top: 0%;
  left: 50%;
  z-index: 1;
  transform: translate(10%, 100%);
  visibility: hidden;
  background: linear-gradient(45deg, #00ff80, aqua);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

HTML

<div id="container">
<div id="wrapper">
  <h2>Hi</h2>
  <span>H</span>
  <span>i</span>
</div>
</div>

纯CSS解决方案 #

问题核心在于visibility属性不支持过渡动画，鼠标离开时元素会瞬间隐藏，导致transform的过渡效果无法触发。我们可以用opacity替代visibility来控制显示/隐藏，同时同步过渡位移和透明度变化：

修改后的CSS代码

#container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#wrapper {
  position: relative;
  font-family: 'Courier New', Courier, monospace;
}

#wrapper h2 {
  font-size: 8rem;
  margin: 0px;
}

#wrapper:hover span:first-of-type {
  opacity: 1;
  transform: translate(0%, 0%);
}

#wrapper:hover span:last-of-type {
  transform: translate(0%, 0%);
  opacity: 1;
}

#wrapper span {
  font-size: 8rem;
  font-weight: bold;
  /* 同时过渡transform和opacity，保证动画同步 */
  transition: transform 1s, opacity 1s;
}

#wrapper span:first-of-type {
  position: absolute;
  top: 0%;
  left: 0%;
  z-index: 1;
  transform: translate(-10%, -100%);
  /* 用opacity:0替代visibility:hidden，支持过渡 */
  opacity: 0;
  background: linear-gradient(45deg, #00ff00, #00ff80);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

#wrapper span:last-of-type {
  position: absolute;
  top: 0%;
  left: 50%;
  z-index: 1;
  transform: translate(10%, 100%);
  opacity: 0;
  background: linear-gradient(45deg, #00ff80, aqua);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

效果说明 #

• 初始状态下，span元素通过opacity: 0保持透明，替代原有的visibility: hidden
• 鼠标悬停时，span元素同时触发opacity: 1和位移到目标位置的过渡
• 鼠标离开时，元素会同步执行透明度降低和滑回初始位置的动画，实现平滑的反转过渡

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