CSS animation restarts if I move the mouse when the container retracts. Can you avoid this?

Question

I would like to keep the animation continuing till the end not restart when I move the mouse inside the element but the cursor (mouse pointer) is always inside the original element. Is it possible?

My code is: Fiddle Demo

.container{
  height: 200px;
  width: 100px;
}
.conteiner li{
  display: inline-block; float: left;
  text-align: center;
  height: 100%; width: auto;
  background-color: white;
}
.conteiner li a{
  position: relative; display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2em 0 2em;
  border: solid 1px black;
}

.conteiner li:HOVER{
  animation-name: menu_header_li;
  animation-duration: 5s;
  animation-timing-function: linear;
}

@keyframes menu_header_li {
    0%{
      transform: rotateY(0deg);
      background-color: white;
    }
    50%{
      transform: rotateY(90deg);
      background-color: red;
    }
    100%{
      transform: rotateY(0deg);
      background-color: white;
    }
}

If I move mouse on the element, the animation restarts and I don't understand why.

You mean just *mouse move* or a quick *mouse move-in, move-out, move-in* combination? If it is the former then I don't see any restart. If it is the latter then it can't be done in pure CSS. — Harry, Dec 06 '15 at 14:28
mouse-in mouse-out, but in 100px of start, non in any part of page... when li restrict to 50px if i move mouse 51px to 50px, the animation restart — user2198593, Dec 06 '15 at 14:35
I didn't get that but your question sounds like a duplicate of http://stackoverflow.com/questions/31806649/how-to-run-the-css3-animation-to-the-end-if-the-selector-is-not-matching-anymore/31833533#31833533. The animation is added only when the `hover` is on. When you no longer hover the element (mouse-out), the animation is no longer applicable and so it would snap back to original position and restart when you hover again. — Harry, Dec 06 '15 at 14:37
but in really i'm always in hover (mouse-in) of original element. — user2198593, Dec 06 '15 at 14:45
Ok so you are saying that you're moving the mouse but the mouse is still within the original boundaries of the element? If yes, I can understand why it restarts and it is because during rotate the element's boundaries are chasing and so you're no longer hovering within the element (this can be seen when you hover closer to the edges of the element). — Harry, Dec 06 '15 at 14:51

Harry · Accepted Answer · 2015-12-08T15:54:46.630

The animation restarts when you hover inside the container and then move the mouse such that the mouse pointer is still inside the original boundaries of the element because the transform: rotateY() changes the element's boundaries once the animation has started and so even though you're moving the mouse within the original boundaries of the element it resets the animation (as the browser treats it as a mouse-out and a mouse-in).

This is very much noticeable when you hover close to the edges of the element. Hover the element close to the edge, let the animation start, do not move the mouse until the mouse is outside the border of the element when it is animating and move it again - this would cause the animation to reset/restart.

This can be overcome by adding the background-color and the transform on the a instead of the li when the li is being hovered on (like in the below snippet). Adding the animation to the a on li:hover works because the boundaries of the li no longer change during animation and so hover is always on.

.container {
  height: 200px;
  width: 100px;
}
.conteiner li {
  display: inline-block;
  float: left;
  text-align: center;
  height: 100%;
  width: auto;
}
.conteiner li a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 2em 0 2em;
  border: solid 1px black;
  background-color: white;
}
.conteiner li:HOVER a {
  animation-name: menu_header_li;
  animation-duration: 5s;
  animation-timing-function: linear;
}
@keyframes menu_header_li {
  0% {
    transform: rotateY(0deg);
    background-color: white;
  }
  50% {
    transform: rotateY(90deg);
    background-color: red;
  }
  100% {
    transform: rotateY(0deg);
    background-color: white;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<ul class="conteiner">
  <li>
    <a>Element one </a> 
  </li>
  <li>
    <a>Element two </a>
  </li>
</ul>

CSS animation restarts if I move the mouse when the container retracts. Can you avoid this?

1 Answers1

Linked