Transition out of animation?

So I have a box .box. That repeats a spinning animation infinitely.

@keyframes spin {
  0% {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}

The animation is only applied when the box's second class name is running

.box.running {
  animation-name:spin;

The purpose of this is so that I can easily stop the animation via javascript. (by removing the second class name.)

I would like it to smoothly transition from wherever it is at in the animation, back to the normal rotation which right now is 0deg.

Any help would be much appreciated.