如何用CSS实现页面加载后hover时仅运行一次loading动画？

我正在为hover时显示电影详情的div制作CSS加载动画，现有HTML代码如下：

<div class="tooltips ">
  <img src=".." alt="img">
  <div class="toolcon">
    <div class="plc">
      <div class="loadingContainer1">
        <div class="ball1"></div>
        <div class="ball2"></div>
        <div class="ball3"></div>
        <div class="ball4"></div>
      </div>
    </div>
    <div class="tooldiv ">
      movie details
    </div>
  </div>
</div>

现有CSS代码：

.tooltips:hover{
 .toolcon{
     display: block;
     background: transparent;
     backdrop-filter: blur(60px);
     opacity: 1;
     div{display: block;}
         }
}

.loadingContainer1{animation: fadeout 1.8s linear forwards;}

@keyframes fadeIn{
    0%{display: flex;}
    100%{display: none;}
}

目前功能正常，但每次hover时加载动画都会重复运行，希望页面加载后仅在第一次hover时触发动画，能否用纯CSS实现？

问题根源在于之前使用display切换元素显示状态，每次hover时元素会被重新渲染，导致动画重复触发。通过调整显示逻辑和动画设置，纯CSS可以实现仅第一次hover运行动画的需求，具体修改如下：

1. 调整详情容器的显示逻辑 #

放弃display切换，改用opacity和visibility控制显示，避免元素被反复移除/重建：

/* 默认隐藏详情容器 */
.toolcon {
  background: transparent;
  backdrop-filter: blur(60px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* hover时显示详情容器 */
.tooltips:hover .toolcon {
  opacity: 1;
  visibility: visible;
}

2. 修改加载动画的触发规则 #

设置动画仅运行1次，且完成后保持最终状态，默认暂停动画，仅第一次hover时启动：

.loadingContainer1 {
  /* 动画仅运行1次，完成后保持最后一帧状态 */
  animation: fadeout 1.8s linear forwards;
  animation-iteration-count: 1;
  /* 默认暂停动画 */
  animation-play-state: paused;
}

/* 第一次hover时启动动画 */
.tooltips:hover .loadingContainer1 {
  animation-play-state: running;
}

3. 修正动画关键帧 #

用opacity和visibility控制加载容器的显示，避免display导致的动画重置：

@keyframes fadeout {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
  }
}

可选优化：动画完成后移除占位空间 #

如果希望加载容器在动画结束后完全不占空间，可以在关键帧中添加高度控制：

@keyframes fadeout {
  0% {
    opacity: 1;
    visibility: visible;
    height: auto;
  }
  99% {
    opacity: 0;
    visibility: visible;
    height: auto;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
}

原理说明 #

加载容器始终存在于DOM中（未被display:none移除），动画设置为仅运行1次并保持最终状态，第一次hover时启动动画，完成后就一直保持隐藏状态，后续hover不会再触发动画。

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