我如何停止我的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。