Zufälliger „Startpunkt“ für die CSS-Keyframe-Animation

Ich habe eine Liste von Feldern mit einem Hintergrundbild, mit dem vertikal gescrollt wird:

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

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

Das "Problem" ist, dass auf diese Weise alle Kästchen den Hintergrund gleichzeitig bewegen.
Ich hätte gerne einen "zufälligen Startpunkt", damit jede Box eine andere Animation hat.

Beispielsweise bewegt sich ein Hintergrund nach unten, während sich ein anderer nach oben bewegt.

Ist das mit reinem CSS möglich? Ich kann weder mit Javascript einen einfachen Weg finden ..

Antworten auf die Frage(4)

Ihre Antwort auf die Frage