css - 我如何停止我的CSS动画

Question

我正在尝试使用 :hover 停止动画，但无论我尝试什么，它都不起作用。我已经尝试了 animation-play-state: paused; 和其他技巧，这让我困扰了大约 4 天。

这是我在 https://jsfiddle.net/jbnx9gf8/ 上的代码以及无效示例。

.circle:hover{
     transform: scale(2,2);
     margin:auto;
     -webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
    animation-play-state: paused;
}

动画必须在悬停时停止，在不悬停时继续我让它变大但仅此而已

Answer 1

您在 circle:before 上应用了动画，因此如果您想暂停动画，您必须将其编码为:

.circle:hover:before{animation-play-state: paused;}

它会为你工作。检查你的Edited fiddle在这里。