"border-radius" not working on "animation"?

Question

css

Good day!
Without much preamble, the crux of the problem: ref . You should pay attention to the circle on the right, when the “tablet” leaves, it does not leave the circle, as it should be, because:

border-radius: 100px;
overflow: hidden;

but from a square. At the same time , if you remove the animation from the first circle, then everything will be as expected: link .
The problem is observed in Google Chrome (latest version), I assume that it is present in other "webkit" browsers as well. Internet Explorer (latest version) does not have this problem.
Thanks in advance!

Answer 1

I am asking this question for the second time. The second time I answer it myself. Found the solution here .
The output is: link .
I would be glad if someone could explain why.