CSS3 Animation

Hello, I am currently trying to use some CSS3 animation to do some simple rotations. I am using keyframes. However, there are a few questions. Part of this might be Jquery also.
Anyways, I need to do an animation unlimited amount of times (while doing an ajax call for instance). During the ajax call a loading animation will happen and a class will be added to that animation.
Once that ajax is finished the loading animation will be removed. However, I want the animate to be finished because I will be attaching another animation to it also.

https://jsfiddle.net/wrwnmrj1/4/

Above is an example of the loading animation. After I am placing items in the "div" then adding an animation to expand it.

Any help would be great. Thanks

==================================================================
EDIT:
Well I think I have a weird way of doing this.
I appended an eventlistener at the end. If the ajax hasnt been completed then restart.

Here is a look: https://jsfiddle.net/wrwnmrj1/5/

But it wont restart after adding the same class again.