Question

When I’m rotating a graphic with CSS3 using the code below (this is just the webkit version but have the other browser specific versions in my style sheet).

.bottomSmallCogStopAnimating  {
   -webkit-animation-name: rotate;
   -webkit-animation-duration: 5000ms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

I’m using jQuery to add this css class to stop the animation by removing the animation name.

.stopAnimating {
  -moz-animation: none;
  -webkit-animation: none;
  animation: none;
}

Removing this property appears to reset the graphic back to its pre rotated state, so what I’m seeing is the graphic pop back to its original rotation which looks pretty bad.

Is there a way to stop this from happening, so the browser will remember its last position and stop animating at this point?

Cheers,
Stefan

Answer 1

Removing the animation from css, or putting it to “none”, will revert to the initial state.
You could just pause it using:

document.getElementsByClassName('bottomSmallCogStopAnimating')[0].webkitAnimationPlayState = 'paused'

Or add a class name:

.stopAnimating {
-webkit-animation-play-state: paused;
}

I am not really sure what you are trying to do.