CSS初始与悬停动画冲突：鼠标移出后初始动画重复触发求助

嘿，我明白你的问题了——当鼠标移出div时，它居然又重新播放了初始的淡入动画，这确实挺烦人的。让我来帮你搞定这个问题！

问题根源 #

你遇到的核心问题是：当hover状态结束后，浏览器会重新应用div默认样式里的animation: div 1s，这相当于重新触发了初始动画，导致透明度变回0再重新淡入。

纯CSS解决方案 #

我们可以通过多动画声明+播放状态控制来解决这个问题，不用写任何JS代码：

首先，把两个动画分开命名，让逻辑更清晰；然后在div的默认样式里同时声明两个动画，用animation-play-state控制它们的播放状态，这样就能避免移出时重新触发初始动画。

完整代码如下：

/* 初始淡入动画 */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* 悬停上下移动动画 */
@keyframes hoverMove {
  50% { top: 200px; }
  100% { top: 0px; }
}

#div {
  opacity: 0; /* 初始设为透明，配合淡入动画 */
  /* 同时声明两个动画：淡入一次，移动循环 */
  animation: fadeIn 1s forwards, hoverMove 1s linear infinite;
  /* 初始状态：淡入动画运行，移动动画暂停 */
  animation-play-state: running, paused;
  position: absolute;
  left: 0px;
  top: 0px;
}

#div:hover {
  /* 悬停时：淡入动画暂停（已经完成），移动动画运行 */
  animation-play-state: paused, running;
}

<div id="div"> abc </div>

为什么这样有效？ #

• 页面加载时，fadeIn动画会运行1秒，结束后通过forwards关键字保持opacity:1的状态，不会回到初始透明。
• 初始状态下hoverMove动画是暂停的，不会影响div的位置。
• 鼠标悬停时，hoverMove开始循环播放上下移动的效果，而fadeIn因为已经完成，暂停状态不会有任何影响。
• 鼠标移出后，hoverMove立即暂停，保持当前的位置；fadeIn依然处于暂停状态，不会被重新触发，所以div会一直保持完全不透明的状态。

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