不悬停时如何暂停关键帧动画

Question

我有一个关键帧动画来移动蒙版位置，并在鼠标悬停时应用。但是当我停止悬停它时，遮罩位置重置为0 ，这使过渡有些奇怪。

---

以下是关键帧：

@keyframes waving-mask {
  0% {
    mask-position: 0% 0;
  }
  100% {
    mask-position: 100% 0;
  }
}

---

当悬停时如何运行动画，而当我停止悬停元素时如何在关键帧位置暂停？

Answer 1

我找到了答案，悬停animation是错误的方法。而是将动画放在类中，然后添加

animation-play-state: paused;

然后将其添加到悬停伪类中

animation-play-state: running;

有关animation-play-state

的更多信息