如何为.mybutton1添加与hover反向的鼠标移出过渡动画？

要实现鼠标移出时的反向过渡动画，你需要调整CSS的过渡属性位置，并设置对应的元素状态：

问题分析 #

现有代码把transition属性写在:hover伪类里，这会导致只有鼠标悬停时才有过渡效果，移出时动画会直接跳转，没有平滑过程。另外要实现translateX(-20px)的反向效果，得明确元素的初始状态和hover状态的对应关系。

修改后的CSS代码 #

.mybutton1 {
  position: fixed;
  top: 6%;
  left: 1px;
  transition: all 1.0s; /* 把过渡属性移到基础类，确保所有状态变化都有平滑动画 */
  transform: translateX(-20px); /* 初始状态：向左偏移20px */
}

.mybutton1:hover {
  transform: translateX(20px); /* 悬停状态：向右偏移20px，和初始状态方向完全相反 */
}

效果说明 #

• 初始状态下，元素在left:1px的基础上向左偏移20px；
• 鼠标悬停时，元素会平滑过渡到向右偏移20px的位置；
• 鼠标移出时，元素会平滑过渡回初始的左偏移状态，正好是hover效果的反向动画。

可选需求：初始无偏移，移出时左移 #

如果希望元素初始位置就是left:1px无偏移，hover时右移20px，移出时左移20px（相对于初始位置），可以用下面的写法：

.mybutton1 {
  position: fixed;
  top: 6%;
  left: 1px;
  transition: all 1.0s;
  transform: translateX(0); /* 初始无偏移 */
}

.mybutton1:hover {
  transform: translateX(20px); /* 悬停右移20px */
}

.mybutton1:not(:hover) {
  transform: translateX(-20px); /* 非悬停状态（移出后）左移20px */
}

这种写法下，元素未被hover时会保持左移20px的状态，仅在hover时切换到右移状态。如果需要移出后回到初始位置，只需把transform: translateX(-20px)改成transform: translateX(0)，这样移出时会从右移位置平滑过渡回初始状态，动画方向和hover相反。

完整HTML代码（无需修改） #

<div class="mybutton1">
  <a href="somelink" target="_blank"><img src="images/pic1.jpg"></a>
</div>

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