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

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/34118458/css-animation-restarts-if-i-move-the-mouse-when-the-container-retracts-can-you