Why does CSS3 animation work incorrectly in Chrome, Yandex Browser, Opera?

Question

Opera

Hey! While experimenting with animation in CSS, I ran into a glitch.
In Chrome, Yandex Browser, Opera animation does not work correctly.
Animation example
If you select “Animate 1” On click, the circle diverges in different directions, but the problem is that the circle has jagged edges! What is most interesting, this animation works fine in Firefox. All other animations work correctly.
What could be the problem? I've already cracked my head...

Answer 1

add for class .my-animate transform: translate(-50%);