+ 1

How to make animations in HTML

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.

4th May 2018, 6:06 PM
Kyle
Kyle - avatar
14 ответов
+ 2
Do you want a lot of them? or just a couple?
5th May 2018, 2:47 AM
Ben Allen (Njinx)
Ben Allen (Njinx) - avatar
+ 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.
5th May 2018, 2:56 AM
Ben Allen (Njinx)
Ben Allen (Njinx) - avatar
+ 1
Can you post your code.
4th May 2018, 8:38 PM
Ben Allen (Njinx)
Ben Allen (Njinx) - avatar
+ 1
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).
4th May 2018, 8:44 PM
Mario Chalén
+ 1
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.
4th May 2018, 11:19 PM
Mario Chalén
+ 1
Okay thank you!
5th May 2018, 3:32 AM
Kyle
Kyle - avatar
0
What's the idea you have in mind?
4th May 2018, 6:37 PM
Mario Chalén
0
Pixelated Rain drops, maybe
4th May 2018, 6:52 PM
Kyle
Kyle - avatar
0
Alright, so you will have to use the <animate> tag for every single rain drop.
4th May 2018, 7:01 PM
Mario Chalén
0
Yes I know
4th May 2018, 7:45 PM
Kyle
Kyle - avatar
0
But my problem is, it only lets me make one animation per document
4th May 2018, 7:45 PM
Kyle
Kyle - avatar
0
Mario,I never learned values in my HTML course, which I see you have. Could that be my problem?
4th May 2018, 11:13 PM
Kyle
Kyle - avatar
0
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?
5th May 2018, 1:36 AM
Kyle
Kyle - avatar
0
A lot of them😁
5th May 2018, 2:50 AM
Kyle
Kyle - avatar