如何让CSS动画在:hover结束后平滑恢复至初始状态

你当前使用CSS Animation实现hover动画，但animation-fill-mode只能控制动画结束后的停留状态，无法处理hover移除时的反向平滑过渡——当hover状态消失，动画会直接终止，元素瞬间跳回初始状态。

解决这个问题的核心是改用CSS Transition，它专门用于处理元素在不同状态间的平滑过渡，会自动处理hover和非hover状态的双向动画。

修改后的完整代码 #

.move img {
  width: 50px;
}

.move {
  font-size: 55px;
  top: 45px;
  position: relative;
  display: inline-block;
  /* 添加过渡属性，指定transform的过渡效果 */
  transition: transform 1.2s ease;
  /* 初始transform状态 */
  transform: scale(1) translate(0, 0) skew(0deg);
}

.move span {
  position: relative;
  display: inline-block;
  /* 添加过渡属性 */
  transition: transform 1.2s ease;
  /* 初始transform状态 */
  transform: scale(1) translate(0, 0) skew(0deg);
}

/* hover状态下直接定义最终transform */
.parent:hover .move {
  transform: scale(1) translate(0%, 0) skew(0deg) rotate(90deg);
}

.parent:hover .move span {
  transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
}

关键修改说明 #

• 移除了原有的@keyframes和hover中的animation-*属性，Transition不需要定义动画帧
• 在.move和.move span上添加transition: transform 1.2s ease;，告诉浏览器当transform属性变化时，用1.2秒的ease曲线完成过渡
• 明确写出初始状态的transform（和你原动画0%帧一致），hover状态直接写最终的transform（和原动画100%帧一致）

这样设置后，鼠标移入时元素会平滑过渡到目标状态，鼠标移出时也会自动以相同的时长和曲线平滑恢复到初始状态。

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