Random “start point” for CSS keyframes animation

Question

I have a list of boxes with a background image that scrolls vertically with:

@keyframes movie {
   0% { background-position: 50% 5%; }
   50% { background-positi         


        

Answer 1

You can use negative animation delay.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay

Specifying a negative value for the animation delay causes the animation to begin executing immediately. However, it will appear to have begun executing partway through its cycle. For example, if you specify -1s as the animation delay time, the animation will begin immediately but will start 1 second into the animation sequence.

So if you want your animation start at 20%, animation delay would be ( -50s * 20% ). You just need to use javascript to create random start point.