Question

请参阅下面的代码，了解悬停时的简单关键帧动画。

.behind {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
}

.infront {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.infront:hover {
  animation: fadeOutLeft 2s;
}

<div class="behind"></div>
<div class="infront"></div>

这看起来正在进行悬停，但是当稍微移动鼠标时，动画将重新启动。

以下是我所描述的问题的简短视频：

https://app.hyfy.io/v/ab7AjpMoXbU/

有什么方法可以阻止动画在元素上通过鼠标移动重置，但是当鼠标离开并重新进入时仍然可以再次播放动画？我无法在这个特定的实例中使用JavaScript。

提前感谢您的智慧。

Answer 1

造成这个问题的原因是悬停被应用在前面的div上，所以当你把光标从那个div中取出时就会停止。

你可以通过在div中包裹两个div（infront / behind）并在包装器上调用hover来修复它

.wraper:hover .infront {
  animation: fadeOutLeft 2s;
}

请参阅代码段：

.behind {
  width: 200px;
  height: 200px;
  background: red;
  position: absolute;
}

.infront {
  width: 200px;
  height: 200px;
  background: blue;
  position: absolute;
}

@keyframes fadeOutLeft {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);
  }
}

.wraper:hover .infront {
  animation: fadeOutLeft 2s;
}

<div class="wraper">
  <div class="behind"></div>
  <div class="infront"></div>
 <div>

悬停时的CSS关键帧动画 - 使用鼠标移动重置动画

1 个答案: