悬停时的CSS关键帧动画 - 使用鼠标移动重置动画 [英] CSS Keyframe Animations on Hover - Animation Resetting with Mouse Movement

问题描述

.behind {width：200px; height：200px;背景：红色; position：absolute;}。infront {width：200px; height：200px;背景：蓝色; position：absolute;} @ keyframes fadeOutLeft {from {opacity：1; }到{不透明度：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。

感谢您提前给出的智慧。

解决方案

导致问题的原因是悬停适用于infront div，因此当您将光标移出该div时，它会停止。

您可以通过在div内包装两个div（infront / behind）来修复它，并将其悬停在包装上

  .wraper：悬停.infront {
动画：fadeOutLeft 2s; 
} 
  

查看代码片段：

.behind {width：200px; height：200px;背景：红色; position：absolute;}。infront {width：200px; height：200px;背景：蓝色; position：absolute;} @ keyframes fadeOutLeft {from {opacity：1; }到{不透明度：0; transform：translate3d（-100％，0，0）; }}。wrapper：hover .infront {animation：fadeOutLeft 2s;}

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

Please see the code below for a simple keyframe animation on hover.

.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>

This looked to be working on hover, however when moving the mouse even slightly, the animation will restart.

Here is a short video of the issue that I am describing:

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

Is there any way that I can stop the animation from resetting with mouse movement on the element but still have the animation play again when the mouse has left and re-entered? I'm unable to use JavaScript in this particular instance.

Thank you for your wisdom in advance.

解决方案

What's causing the issue is that the hover is applied on the infront div, so when you take the cursor out of that div it stops.

You can fix it by wraping the two divs(infront/behind) inside a div and call hover on the wraper

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

See code snippet:

.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关键帧动画 - 使用鼠标移动重置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！