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

To elaborate on the suggestion in Chef's answer, the Javascript to randomise the 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 for animation delay (so some elements start mid-animation rather than having their initial animation delayed).