I don’t think it can replace it.
The codepen demo you posted relies on a circular animation that is infinite and has no fixed stop or start. If you change it to a linear movement the elements have moved away from each other rather than around each other in a circle.
The demo is also infinite in that it keeps on spinning whereas the curtains have a finite movement and therefore once it reaches the end it stops.
I believe the transition is the only method that achieves this effect properly as transitions go back to their original values with a transition unlike animations. To use css animations for this would require js to work out the percentage position of the element when clicked and then plug that value back into a keyframe so it can work from where it is back to the start etc. That seems rather a lot of work when you can do it with basically one line of css using transition.