Losowy „punkt początkowy” dla animacji klatek kluczowych CSS
Mam listę skrzynek z obrazem tła, który przewija się w pionie za pomocą:
@keyframes movie {
0% { background-position: 50% 5%; }
50% { background-position: 50% 95%; }
0% { background-position: 50% 5%; }
}
.movie {
animation: movie 50s linear infinite;
}
„Problem” polega na tym, że wszystkie pola mają ruchome tło w tym samym czasie.
Chciałbym mieć „losowy punkt początkowy”, aby każde pudełko miało inną animację.
Na przykład jedno tło przesuwa się w dół, a drugie porusza się w górę.
Jest to możliwe dzięki czystemu CSS? Nie mogę znaleźć prostego sposobu z Javascriptem ..