How i can do that a second animation with the same Square? (HTML)

Question

What I want to do is that the same blue square from the position where it was left at the end of the first animation, moves from the strings "y = 0" to "y = 250"; but I don't know how to do it, help please
My code:

<svg width="1000" height="300">
<rect width="150" height="150" fill="blue">
<animate attributeName="x" from="50" to="300"
dur="2s" fill="freeze" />
</rect>
</svg>

Answer 1

Use begin to set a delay
https://code.sololearn.com/WQ8LmqJS9R1Z/?ref=app

Answer 2

Read more
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin

Answer 3

No hay problema😀

Answer 4

AlexRos is this what you want ?
https://code.sololearn.com/Wn7Klj2YCR5i/?ref=app

Answer 5

ok look at the remake AlexRos

Answer 6

BroFar , Thanks for trying to help but what I mean is that I want to make the first animation and then go down and in the code that you sent me it does everything diagonally at the same time.

Answer 7

Contra si hablas español jajajjajaja

Answer 8

Kevin Star thanks!!!!!! in HTML course don’t teaches the atribute begin or at least untill i do (Almost complete)

Answer 9

Thanks!!! Kevin Star other time