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 靠近元素的边缘时，这一点非常明显。将元素悬停在靠近边缘的位置，让动画开始，不要移动鼠标，直到鼠标在元素的边界之外，然后再次移动它 - 这会导致动画 reset/restart.

这可以通过在 a 上添加 background-color 和 transform 而不是当 li 悬停在 li 上时添加 transform 来克服（就像下面的片段）。将 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>

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

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

css

css-transforms

css-animations