CSS动画问题：仅在停止悬停后让div返回初始位置

你的代码中，div:not(:hover)选择器在页面加载完成后就会匹配目标元素，因此初始状态下就会触发反向动画，这就是为什么还没开始悬停就看到返回效果。要实现仅在停止悬停时执行反向动画，可以采用以下两种方案：

方案一：纯CSS实现（需现代浏览器支持:has()选择器） #

利用:has()选择器判断父容器是否曾被悬停过，只有满足该条件时，才在元素不悬停时触发反向动画：

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    .container {
      /* 父容器仅用于状态判断，无额外样式需求 */
    }

    .container div {
      width: 100px;
      height: 100px;
      padding: 2px;
      background-color: lightblue;
      color: White;
      font-size: 40px;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
      animation: none; /* 初始无动画 */
    }

    /* 悬停时播放正向无限动画 */
    .container:hover div {
      animation: moveDiv 10s linear infinite;
    }

    /* 仅当父容器曾被悬停过，且当前元素未悬停时，播放反向动画 */
    .container:has(:hover) div:not(:hover) {
      animation: moveDiv 3s reverse ease-in forwards;
    }

    @keyframes moveDiv {
      0% {
        transform: translate(0px, 0px);
        background-color: lightblue;
      }
      25% {
        transform: translate(250px, 180px);
        background: yellow;
      }
      50% {
        transform: translate(490px, 60px);
        background: lightseagreen;
      }
      75% {
        transform: translate(550px, 390px);
        background: crimson;
      }
      100% {
        transform: translate(600px, 450px);
        background: orchid;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <div>hello</div>
  </div>
</body>
</html>

方案二：JavaScript实现（全浏览器兼容） #

通过事件监听动态切换动画类，精准控制动画触发时机，适合所有浏览器：

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      padding: 2px;
      background-color: lightblue;
      color: White;
      font-size: 40px;
      text-align: center;
      vertical-align: middle;
      display: table-cell;
    }

    /* 正向无限动画类 */
    .animate-forward {
      animation: moveDiv 10s linear infinite;
    }

    /* 反向回退动画类 */
    .animate-backward {
      animation: moveDiv 3s reverse ease-in forwards;
    }

    @keyframes moveDiv {
      0% {
        transform: translate(0px, 0px);
        background-color: lightblue;
      }
      25% {
        transform: translate(250px, 180px);
        background: yellow;
      }
      50% {
        transform: translate(490px, 60px);
        background: lightseagreen;
      }
      75% {
        transform: translate(550px, 390px);
        background: crimson;
      }
      100% {
        transform: translate(600px, 450px);
        background: orchid;
      }
    }
  </style>
</head>
<body>
  <div id="target">hello</div>

  <script>
    const target = document.getElementById('target');

    // 鼠标进入：播放正向动画
    target.addEventListener('mouseenter', () => {
      target.classList.remove('animate-backward');
      target.classList.add('animate-forward');
    });

    // 鼠标离开：播放反向动画
    target.addEventListener('mouseleave', () => {
      target.classList.remove('animate-forward');
      target.classList.add('animate-backward');
    });

    // 反向动画结束后清除类，避免初始状态误触发
    target.addEventListener('animationend', (e) => {
      if (e.animationName === 'moveDiv' && target.classList.contains('animate-backward')) {
        target.classList.remove('animate-backward');
      }
    });
  </script>
</body>
</html>

关键说明 #

• 方案一依赖:has()选择器，Chrome 101+、Firefox 121+等现代浏览器支持；
• 方案二通过JS事件精准控制动画类的添加/移除，兼容所有主流浏览器，同时在反向动画结束后清除类，确保初始状态不会触发动画。

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