Wie stoppe ich meine CSS-Animation

Question

Ich versuche, eine Animation mit :hover zu stoppen, aber egal, was ich versuche, es funktioniert nicht. Ich habe versucht, die animation-play-state: paused; und andere Tricks, das ist mit mir für etwa 4 Tage jetzt.

Hier ist mein Code auf https://jsfiddle.net/jbnx9gf8/ und ein Beispiel von was nicht funktioniert.

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

Die Animation muss, wenn schwebte anhalten und fortsetzen, wenn ich es nicht schwebte wurde größer zu bekommen, aber das ist es

Answer 1

Sie angewendet Animation auf circle:before, also wenn Sie die Animation Sie haben pausieren wollen Code als:

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

und es wird für Sie arbeiten. Überprüfen Sie Ihre Edited fiddle hier.