Html 如何避免中断的 CSS 动画

发布于04月19日

如果将鼠标悬停在文本下方，但在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>

这是一个问题，当用户通过一个按钮太快，那么我该如何解决这个问题？

推荐答案

问题是#i向上移动(位置改变)，而你的悬停位置仍然相同，没有#i.因此，它应用了#i种样式(而不是#i:hover种样式).

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

@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