css - CSS3 Animation Rotate, removing animate property makes the animation revert back to its origin position -

When I am moving a graphic with CSS3 using the code given below (this is only WebKit version but other browsers The specific version in my style sheet).

  .bottomSmallCogStopAnimating {-webkit-animation-name: rotate; -WebKit-Animation-period: 5000m Webkit-animation-repetition-count: infinity; Webkit-animation-timing function: linear; }   
 I am using jQuery to add this CSS class to prevent animation to remove the animation name.  
  .stopAnimating {-moz-animation: none; -WebKit-Animation: None; Animation: None; }   
 To remove this property the graphic appears to reset back to its pre-rotate state, then I see which graphic pop is back to its original rotation which looks very bad Used to be.  
 Is there a way to prevent this from happening, then should the browser remember its last state and stop Animating at this point? You can simply stop it by removing the animation from the CES, or it will be returned to the "none", initial state:  
  document.getElementsByClassName ('bottomSmallCogStopAnimating') [0] .webkitAnimationPlayState = 'Paused'   
 Or add a class name:  
  .stopAnimating {-webkit- animation-play-state: paused; }   
 I'm not really sure what you are trying to do.