Css Keyframe Animations On Hover - Animation Resetting With Mouse Movement

Please see the code below for a simple keyframe animation on hover. This looked to be working on hover, however when moving the mouse even slightly, the animation will restart. He

Solution 1:

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;
}

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