如何避免中断 CSS 动画

Question

如果您将鼠标悬停在文本下方但在 div 内，动画将在中途中断，并使该元素不断在动画和非动画之间切换的故障“动画”。

@keyframes hover {
  0% {bottom: 0px; border-radius: 0%;}
  100% {bottom: 100px; border-radius: 10%;}
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

#i {
    transition: 0.5s ease;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(255, 100, 0);
    width: 200px;
    height: 200px;
    font-size: 50px;
    text-align: center;
    font-family: sans-serif;
    bottom: 0px;
}

#i:hover {
    position: relative;
    cursor: pointer;
    animation: hover 0.5s ease;
    bottom: 100px;
    border-radius: 10%;
}

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="i"><strong>Hover</strong></div>
  </body>
</html>

当用户通过按钮的速度过快时会出现问题，我该如何解决？

Answer 1

问题是 #i 向上移动（位置改变）而你的悬停位置仍然是没有 #i 的位置。因此，它应用了 #i 样式（而不是 #i:hover 样式）。

您可以为 #i 添加一个容器元素，这将帮助您为悬停行为保留容器 space。

@keyframes hover {
  0% {
    bottom: 0px;
    border-radius: 0%;
  }
  100% {
    bottom: 100px;
    border-radius: 10%;
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container #i {
  transition: 0.5s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 100, 0);
  width: 200px;
  height: 200px;
  font-size: 50px;
  text-align: center;
  font-family: sans-serif;
  bottom: 0px;
}

.container:hover #i {
  position: relative;
  cursor: pointer;
  animation: hover 0.5s ease;
  bottom: 100px;
  border-radius: 10%;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div class="container">
    <div id="i"><strong>Hover</strong></div>
  </div>
</body>

</html>

请注意，如果动画完成，animation 确实支持完整的动画循环。如果你试图在动画时打断它，CSS 不会帮助你完成它（会发生故障）。

在这种情况下，您可以使用 transition 而不是 animation

transition: 0.5s ease;

如果想用keyframes做一个复杂的动画，可以考虑用Javascript来处理，可以查看this document。

Answer 2

这里根本不需要关键帧，想想简单... 您可以在 :hover #i 部分编写所需的转换。

现在你的动画非常流畅而且你没有小故障，当你在动画播放时将光标移开时，方块不会掉下来。

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container #i {
  transition: 0.5s ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(255, 100, 0);
  width: 200px;
  height: 200px;
  font-size: 50px;
  text-align: center;
  font-family: sans-serif;
  bottom: 0px;
}

.container:hover #i {
  position: relative;
  cursor: pointer;
  animation: 0.5s ease;
  transform: translateY(-100px);
  border-radius: 10%;
}

<!DOCTYPE html>
<html lang="en">

<head>
</head>

<body>
  <div class="container">
    <div id="i"><strong>Hover</strong></div>
  </div>
</body>

</html>

如何避免中断 CSS 动画

How to avoid interupted CSS animations

html

css

css-animations