Basically, one element would have two interaction: one that stages it, and a looping one for its idle state. Take your element and wrap it into 2 extra divs. The outer div will be affected the stage (first) animation. If it’s a timed animation, it’s cool, just remember the total time of the anim. Let’s say 2200ms.
Then affect the idle looping animation to the div inside it, the inner wrapping div. For example a rotation. Set il like you want, then add a delay equal to the length of the stage anim. 2200ms as we imagine above.
Now it will play as you want it to: stage anim will animate the outer div with the inner + your element inside, then when the anim finishes, the idle looping anim will take over.
You can then fine tune to blend the two interaction nicely, make them overlap a bit.
A lot of my anims have the idle animation working while the staging anim runs, it adds ganularity to the movements. Look at the submarine here, it always has an idle up and down animation, that adds to the main moving anims. http://lebathyscaphe.com/