Random "starting point" for animating CSS keyframes

Question

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

@keyframes movie { 0% { background-position: 50% 5%; } 50% { background-position: 50% 95%; } 0% { background-position: 50% 5%; } } .movie { animation: movie 50s linear infinite; } 

The “problem” is that in this way all fields have a background move at the same time.
I would like to have a "random starting point" so that each box has a different animation.

For example, one background moves down while the other moves up.

Is it possible with pure CSS? I cannot find an easy way with either Javascript ..

Answer 1

You can use negative animation delay.

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

Specifying a negative animation delay value causes you to start execution immediately. However, it seems that they began to fulfill partially through their cycle. For example, if you specify -1s as the animation delay time, the animation starts immediately, but starts 1 second in the animation sequence.

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

Answer 2

You can use animation-delay .

 animation-delay: 10s; 

Or inside your shorthand:

 animation: movie 50s linear 10s infinite; 

It may be easier to deal with some pseudo-classes:

 .movie:nth-of-type(1) { animation-delay: 10s; } .movie:nth-of-type(2) { animation-delay: 20s; } .movie:nth-of-type(3) { animation-delay: 30s; } 

Answer 3

This can be done using pure CSS without writing (or generating via SCSS, etc.) using a combination of

• Negative animation-delay to change animation start time
• A few nth-child or nth-of-type rules for applying formulas that will “randomize” a rule.

 movie.nth-child(2n) { animation-delay: -10s } movie.nth-child(2n+1) { animation-delay: -30s } movie.nth-child(3n) { animation-delay: -20s; } movie.nth-child(5n) { animation-delay: -40s } movie.nth-child(7n) { animation-delay: -15s } {etc} 

Using only the first 2 rules gives alternating rules (for example, even / odd rows in a table). Pay attention to the second rule, which has an offset of +1 - this is important if your class ( movie ) does not have the corresponding default value for the rule being changed (0 by default, anyways for animation-delay ).

Using nth-child(n) formulas with integer multiple values ​​of n makes the effective length of the pattern equal to the product of all your simple factors (for example, 2*3*5*7 = 210 elements before repeating).

 li { animation: movie 5s linear infinite; } @keyframes movie { 20% { color: white } 40% { color: black } } li:nth-child(2n-1) { background-color: lime; animation-delay: 1s; } li:nth-child(2n) { background-color: orange; animation-delay: 2s; } li:nth-child(3n) { background-color: yellow; animation-delay: 3s; } li:nth-child(5n) { background-color: magenta; animation-delay: 5s; } li:nth-child(7n) { background-color: aqua; } 

 <ul> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> </ul> 

For further randomization, you can create a second set of rules with slightly different n multiple / offsets and change the animation-duration (or any other rule).

Answer 4

To clarify the chef's suggestion, Javascript for randomizing animation delays on a bunch of elements might look something like this:

 var elements = document.querySelectorAll('.movie') var animationDuration = 50000; // in milliseconds // Set the animationDelay of each element to a random value // between 0 and animationDuration: for (var i = 0; i < elements.length; i++) { var randomDuration = Math.floor(Math.random() * animationDuration); elements[i].style.animationDelay = randomDuration + 'ms'; } 

Of course, you can multiply randomDuration by -1 if you want to use negative values ​​to delay the animation (so some elements start the average animation rather than delay their initial animation).