CSS动画实现：悬停时文本淡出平移后放大淡入

需求描述 #

• 鼠标悬停在<h2>元素上时，元素先小幅移动并淡出，片刻后淡入且字号变大
• 悬停触发正向动画，移出时执行反向动画
• 无需指定初始字号（现有代码硬编码了2rem，希望去掉这个限制）
• 悬停时最终保持放大状态（示例GIF为循环播放，实际需停在放大状态）

现有尝试代码 #

CSS #

:root {
  height: 100%;
  background-color: lightgrey;
  padding: 30px;
  text-align: center;
}
h2 {
  font-family: Arial;
  font-size: 2rem;
}
:root:hover h2 {
  font-size: 5rem;
  animation: text 1s forwards ease-out;
}
@keyframes text {
  0% { transform: translateY(-30px); opacity: 1; }
  50% { opacity: 0; }
  100% { }
}

HTML #

<h2>TEXT</h2>

解决方案 #

要实现符合需求的效果，我们可以通过CSS动画的forwards属性保持最终状态，结合animation-name切换正向/反向动画，同时用transform: scale()替代直接修改font-size，从而避免硬编码初始字号：

完整代码 #

CSS

:root {
  height: 100%;
  background-color: lightgrey;
  padding: 30px;
  text-align: center;
}

h2 {
  font-family: Arial;
  /* 不指定固定初始字号，继承父元素或使用浏览器默认值 */
  font-size: inherit;
  opacity: 1;
  transform: translateY(0) scale(1);
  /* 统一动画配置 */
  animation-duration: 0.8s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

/* 悬停触发正向动画 */
:root:hover h2 {
  animation-name: hoverAnimation;
}

/* 移出触发反向动画 */
:root:not(:hover) h2 {
  animation-name: leaveAnimation;
}

/* 悬停正向动画：上移淡出 → 淡入放大 */
@keyframes hoverAnimation {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  40% {
    opacity: 0;
    transform: translateY(-20px) scale(1);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(2.5);
  }
}

/* 移出反向动画：放大状态 → 上移淡出 → 恢复初始状态 */
@keyframes leaveAnimation {
  0% {
    opacity: 1;
    transform: translateY(0) scale(2.5);
  }
  40% {
    opacity: 0;
    transform: translateY(-20px) scale(2.5);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

HTML

<h2>TEXT</h2>

方案说明 #

1. 摆脱初始字号限制：去掉h2的固定font-size，使用inherit继承父元素字号，完全满足“无需指定初始字号”的需求。
2. 双向动画触发：通过:hover和:not(:hover)分别绑定正向/反向动画，实现悬停和移出时的完整交互。
3. 流畅缩放效果：用transform: scale()替代直接修改font-size，动画更平滑，且缩放比例基于元素初始大小，无需提前知道具体字号数值。
4. 状态持久化：animation-fill-mode: forwards确保动画结束后保持最终状态，悬停时停在放大状态，移出时回到初始状态。
5. 时序匹配：正向与反向动画的关键帧时序对应，过渡效果和预期GIF完全一致。

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