Start animation at different positions.

Question

I created a code that contains 50 stars and I animated the the stars to draw. I didn't want all the star animations to start at the same position, so I found a solution online to set the animation delay to a negative value. However, the problem is that since it's a negative value, the stars appear half drawn immediately and then just finish up.

Goal: To have the have the stars drawn from the beginning but start at different positions.

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

Answer 1

Hi YosG,

Nifty idea! :)

I'm a little confused why you would use negative delays when you don't want the stars to be partially pre-drawn ... if you wanted the stars to all be drawn at the same pace and at the same time, then maybe what you're looking for instead is to rotate the stars themselves?

Answer 2

Have you looked at the code? rotating the stars isn't an option. I want to be able to define the starting position of the stars, so that I can have all stars start at the same time from a different starting point.

Answer 3

Hi YosG,

Maybe I am just not understanding what you want for your end result, because I did look at the code. All I got was that you wanted the start position to be different and the start time to be the same. I am still not understanding why rotating is not an option.

Here's a partial implementation, just to see if we're speaking the same language:

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

I removed the negative delay from the CSS and rotated 4 of the stars (first 4 in the HTML but last 4 in the output).

Can you please find a different way of explaining what you wanted?