仅用CSS如何实现鼠标悬停移出时双transform属性差异化过渡动画

问题原因 #

你当前的代码将transition统一设置在元素默认状态下，所有transform相关属性的变化都会被应用过渡效果，因此鼠标移出时，旋转和平移会同步执行反向动画，无法达到“移出时仅平移、不旋转”的要求。

实现方案 #

核心逻辑是分开控制两种状态下的过渡规则：

• 鼠标移入（进入hover态）时：给平移、旋转两个属性都加500ms过渡，让两个动画同步执行
• 鼠标移出（回到默认态）时：只给平移属性加500ms过渡，旋转属性过渡时长设为0，移出瞬间直接复位，不产生旋转动画

使用现代浏览器原生支持的独立变换属性实现代码如下：

.check {
  display: flex;
  min-height: 100vh;
  justify-content: center;
  align-items: center;
  color: #000;
  font-size: 25px;
  cursor: pointer;
  /* 初始状态：仅平移有过渡，旋转无过渡直接复位 */
  transition: translate 500ms ease-in-out, rotate 0ms ease-in-out;
  translate: 0 0;
  rotate: 0deg;
}

.check:hover {
  /* 悬停状态：平移、旋转都加过渡，同步执行动画 */
  transition: translate 500ms ease-in-out, rotate 500ms ease-in-out;
  translate: -100px 0;
  rotate: 360deg;
}

对应的HTML代码无需修改，和你原有代码一致：

<div class="check">Hello</div>

效果说明 #

• 鼠标悬停到元素上时：元素会一边向左平移100px，一边完成360度旋转，两个动画同步在500ms内完成
• 鼠标移出元素时：旋转角度会瞬间复位到初始状态，不会出现反向回转的动画，仅平移动作会平滑过渡回初始位置，完全匹配需求。

如果需要兼容不支持独立translate/rotate属性的老旧浏览器，可以用双层嵌套元素的方案实现：外层元素负责平移动画、内层元素负责旋转动画，分别给两个元素单独设置对应状态的过渡规则即可。

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