悬停动画使初始动画在鼠标移出后重新运行

Question

我有一个元素，其动画在开始时启动一次，而在悬停时动画运行无限。

当鼠标离开时，无限动画停止但初始重新运行，我该如何防止？

这里有一个例子，我不想在鼠标离开时重新运行 kf-initial 动画。

谢谢！

.foo {
  margin: auto;
  margin-top: 100px;
  padding: 1em;
  width: fit-content;
  border: solid 1px black;
  background: red;
  color: white;
  font-size: 2em;
    
  /* The initial animation */
  animation: kf-initial 2s;
}

.foo:hover {
  /* The infinite animation */
  animation: kf-hover 10s infinite;
}

@keyframes kf-initial {
  from {transform: scale(0.2)}
  to {transform: scale(1)}
}

@keyframes kf-hover {
  100% {transform: rotate(1turn)}
}

<div class="foo">
  Hello world
</div>

Answer 1

这可能是解决方案。您目前有两个动画完全使用属性 transform，您需要做的是将它们分开，这样问题就很容易解决了。我还在悬停时添加了一个 paused/running 状态，以获得一点平滑度。

.foo {
  margin: auto;
  margin-top: 100px;
  padding: 1em;
  width: fit-content;
  border: solid 1px black;
  background: red;
  color: white;
  font-size: 2em;
  
  /* The infinite animation */
  animation: kf-hover 10s infinite;
  animation-play-state: paused;
}

.bar {
  /* The initial animation */
  animation: kf-initial 2s;
}

.foo:hover {
  animation-play-state: running;
}

@keyframes kf-initial {
  from {
    transform: scale(0.2)
  }
  to {
    transform: scale(1)
  }
}

@keyframes kf-hover {
  100% {
    transform: rotate(1turn)
  }
}

<div class="bar">
  <div class="foo">
    Hello world
  </div>
</div>

Answer 2

如果您不希望在鼠标离开悬停状态后初始状态动画再次运行并且您希望元素 return 到其先前的方向。您需要使用 JavaScript 将 class 添加到 foo 元素，并为不再允许该动画运行的 class 添加 CSS。

const fooEl = document.querySelector(".foo");

fooEl.addEventListener("mouseleave", () => {
  fooEl.classList.add("stopped");
})

.foo {
  margin: auto;
  margin-top: 100px;
  padding: 1em;
  width: fit-content;
  border: solid 1px black;
  background: red;
  color: white;
  font-size: 2em;
    
  /* The initial animation */
  animation: kf-initial 2s;
}

.stopped {
  animation: none;
}

.foo:hover {
  /* The infinite animation */
  animation: kf-hover 10s infinite;
}

@keyframes kf-initial {
  from {transform: scale(0.2)}
  to {transform: scale(1)}
}

@keyframes kf-hover {
  100% {transform: rotate(1turn)}
}

<div class="foo">
  Hello world
</div>

悬停动画使初始动画在鼠标移出后重新运行

Hover animation makes initial animation rerun after mouse out

html

css

css-animations