如何保证用户停止悬停后CSS动画仍完整执行，且无需JavaScript实现？

存在无需JavaScript的实现方案，核心解决思路是规避「将悬停事件绑定在位移元素本身」的错误做法，具体实现如下：

核心原理 #

你遇到的动画中断问题根源是:hover绑定在了会移动的元素上，元素位移后鼠标脱离元素范围，悬停状态直接丢失导致动画中断。我们只需要把悬停事件绑定在一个静止、不会随动画位移的父容器上即可解决。

实现步骤 #

• 给需要执行动画的元素套一个父容器，父容器的尺寸需要覆盖元素动画运行的全部路径范围，确保用户触发悬停后，即便元素位移，鼠标依然处于父容器范围内，悬停状态不会丢失
• 正向动画在父容器:hover时触发，反向动画在悬停丢失后触发，动画可以用transition或@keyframes实现

代码示例 #

<!-- 静止父容器，尺寸覆盖动画全部路径 -->
<div class="animation-wrapper">
  <div class="move-element"></div>
</div>

.animation-wrapper {
  /* 父容器宽度 = 元素宽度 + 最大位移距离，高度和元素一致即可 */
  width: 200px;
  height: 100px;
  position: relative;
}

.move-element {
  width: 100px;
  height: 100px;
  background: #3b82f6;
  position: absolute;
  left: 0;
  /* 反向动画：悬停丢失后1s平滑回到初始位置 */
  transition: transform 1s ease;
}

/* 父容器悬停时触发正向动画 */
.animation-wrapper:hover .move-element {
  /* 向右位移100px，刚好到达父容器右边界 */
  transform: translateX(100px);
}

如果需要即便用户提前移出父容器，也要等正向动画跑完再执行反向，可以给非悬停状态的过渡加等于正向动画时长的延迟：

.move-element {
  /* 延迟1s执行反向动画，刚好等正向1s的动画跑完 */
  transition: transform 1s ease 1s;
}
.animation-wrapper:hover .move-element {
  /* 正向动画无延迟，立刻执行 */
  transition: transform 1s ease 0s;
}

注意事项 #

• 如果动画路径过长，父容器无法覆盖全部范围，可以用CSS @keyframes配合animation-play-state属性实现，但是需要注意低版本浏览器兼容性
• 上述方案兼容Chrome、Firefox、Safari等所有主流现代浏览器，IE11及以上版本也可正常运行

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