Случайная «начальная точка» для анимации ключевых кадров CSS
У меня есть список полей с фоновым изображением, которое прокручивается по вертикали:
@keyframes movie {
0% { background-position: 50% 5%; }
50% { background-position: 50% 95%; }
0% { background-position: 50% 5%; }
}
.movie {
animation: movie 50s linear infinite;
}
«Проблема» заключается в том, что таким образом все окна имеют фон, перемещающийся одновременно.
Я хотел бы иметь «случайную стартовую точку», чтобы у каждой коробки была своя анимация.
Например, один фон движется вниз, а другой движется вверх.
Это возможно с чистым CSS? Я не могу найти простой способ ни с Javascript ..