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-position: 50% 95%; }
   0% { background-position: 50% 5%; }
}

.movie {
    animation: movie 50s linear infinite;
}

The "problem" is that in this way all the boxes have the background moving at the same time.
I'd like to have a "random start point" so that each box has a different animation.

For example, one background is moving down while another is moving up.

It is possible with pure CSS? I can't find a simple way neither with Javascript..

Answer 1

You can use animation-delay.

animation-delay: 10s;

Or inside your shorthand:

animation: movie 50s linear 10s infinite;

Maybe easier to handle, 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 2

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).