How do I make one SVG animation execute and then the next instead of all at once?

Question

I am trying to make an SVG animation where a little circle is going around the perimeter of a square. I made the x animation come before the y animation but its now going in a diagonal line! Help would be appreciated. Thanks here is my HTML code:

<svg width="1000" height="250">
<rect width="150" height="150" fill="red">
<animate attributeName="fill" from="red" to="violet"
dur="3s" fill="freeze" repeatCount="indefinite"/>
</rect>
<circle cx="8" cy="12" r="14" fill="pink">
<animate attributeName="fill" from="pink" to="yellow"
dur="3s" fill="freeze" repeatCount="indefinite" />
<animate attributeName="cx" from="8" to="150"
dur="3s" fill="freeze" repeatCount="1" />
<animate attributeName="cy" from="12" to="150"
dur="3s" fill="freeze" repeatCount="1" />
</circle>
</svg>

Answer 1

Maybe linking your code will better help understanding the problem and correct it!

Answer 2

I understand but I can't provide a solution since I didn't understand clearly and also people prefer here to directly check code and maybe correct it,also you could copy a portion of it and paste it here ,where you are actually facing problem ,

Answer 3

Abhay I thought about that but its not public. Sory😕

Answer 4

ok, I will copy my HTML into the question