Why is there an extra movement of the element?

Question

JavaScript

There is a circle around which a small circle should run, but after the 3rd (step) click on next, the element completely describes the entire circle and takes the position as it was supposed to.
Why does the circle move in all circles and return to the intended position?
https://jsfiddle.net/yanyshevvd/r0svp54y/