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靠近元素的边缘时，这是非常明显的。将元素悬停在靠近边缘的位置，让动画开始，不要移动鼠标，直到鼠标在元素边框处于动画状态并再次移动时 - 这会导致动画重置/重启。

这可以通过在background-color上添加transform和a而不是li在li上悬停时来解决（例如在下面的片段中）。将animation添加到a上的li:hover是有效的，因为li的边界在动画期间不再更改，因此悬停始终开启。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: