How to make animations in HTML

Question

I made a moving rectangle that goes on and off the screen in an "x" direction, but I am trying to make more moving rectangles but it keeps projecting the same one.

Answer 1

Do you want a lot of them? or just a couple?

Answer 2

Then I'd recommend using JavaScript. SVG animations aren't good for what you want. While it is possible, it would be easier to do it in JavaScript.

Answer 3

Can you post your code.

Answer 4

Kyle I was just making this code. Check it out, I did tres animations with different movements.

https://code.sololearn.com/W0EeZkTTlM92/?ref=app

If your problem is not solved yet, please tell us more details and share your code (if possible).

Answer 5

Kyle I don't think so, values are only replacing the "from" and "to" statements.

For example, you can see that one of them has
attributeName="x" values="0;300;0"
So, it means that it will start from 0, and will move to 300, and then it will go back to 0 in the "x" axis (horizontally).
^^That's something you can't do with the "from" and "to" statements.

Answer 6

Okay thank you!

Answer 7

What's the idea you have in mind?

Answer 8

Pixelated Rain drops, maybe

Answer 9

Alright, so you will have to use the <animate> tag for every single rain drop.

Answer 10

Yes I know

Answer 11

But my problem is, it only lets me make one animation per document

Answer 12

Mario,I never learned values in my HTML course, which I see you have. Could that be my problem?

Answer 13

Hey guys thanks for helping? I wrote a quick code demonstrating my issues.

https://code.sololearn.com/WoUAQWs7CS41/?ref=app

I made an animation going downwards and the exact Sams one but with the x axis. Only one showed.

Also I would like to have both of them with the ‘y’ axis but spread apart so it looks like raindrops. How would I do that?

Answer 14

A lot of them😁