Compatibility issues. Use css and browser vendors prefixes to maintain the circle in all browsers.
Im not too savy when it comes to coding, i'm more of a front end designer. Now when you say use CSS and vendor prefixes what excatly do you mean (code)? and is there an option to place this inside of Edge? is it something I have to add to the animation? and do I have to re re-adjust any of the animation location points when I do this. I'm sorry that I do not understand the the terminology too well I'm just starting to learn all this web/programming terminlolgy. I do thank you for responding to my post it is much appreciated, truly thank you.
Please download the sample above and look in composition ready for the code. You should not have to readjust the locations if you make the circle the same size. You will have to use trial and error for the percentage.
Main browser prefixes are:
-moz-Mozilla Foundation (Gecko-based browsers)
-webkit-Safari, Chrome (and other WebKit-based browsers)
-apple-Webkit supports properties using the -apple- prefixes as well
Anyway, there is a lot of info on the web. When you do not know something, google it. I usually find the information I need.