如果在容器收缩时移动鼠标，CSS动画将重新启动.你能避免这种情况吗

Question

当我在元素内移动鼠标，但光标（鼠标指针）始终在原始元素内时，我希望动画一直持续到最后，而不是重新开始。有可能吗？

我的代码是：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;
    }
}

如果我在元素上移动鼠标，动画会重新启动，我不明白为什么。

Answer 1

当您将鼠标悬停在容器内，然后移动鼠标，使鼠标指针仍在元素的原始边界内时，animation会重新启动，因为transform: rotateY()会在动画开始后更改元素的边界，因此即使您在元素的原始边界内移动鼠标，它也会重置动画（因为浏览器将其视为一个鼠标移出和一个鼠标移入）。

当hover靠近元素的边缘时，这一点非常明显。将元素悬停在靠近边缘的位置，让动画开始，在制作动画时，在鼠标位于元素边界之外之前不要移动鼠标，然后再次移动鼠标-这将导致动画重置/重新启动。

这可以通过在li悬停时在a上添加background-color和transform而不是li来克服（如下面的片段中所示）。将animation添加到li:hover上的a中是有效的，因为li的边界在动画过程中不再改变，因此悬停始终处于打开状态

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