Как выделить дочерний элемент из списка в JavaScript? ⇐ CSS

[Anonymous]

Я пытаюсь имитировать снег для веб-сайта, прямо сейчас у меня есть 5 частиц снега, и я пытаюсь заставить их рандомизировать свое левое положение после того, как они пройдут через нижнюю линию окна просмотра. В настоящее время я могу заставить первого дочернего элемента рандомизироваться через 6 секунд (продолжительность анимации составляет 7 секунд, но по какой-то причине она выстраивается в линию). Однако я не могу понять, как указать, какой дочерний элемент, или даже выяснить, как это влияет на первого дочернего элемента, а не на родителя. Некоторая помощь будет оценена по достоинству.

let Snow = document.querySelector('.snow'); функция setProperty(позиция) { Snow.style.left = позиция + «%»; } функция ChangeAnimationPos() { пусть позиция = Math.random() * 101; setProperty (позиция); } setInterval(changeAnimationPos, 6000) body { маржа: 0; фон: линейный градиент (снежный, небесно-голубой); фоновое вложение: исправлено; } #header { поле сверху: 5 пикселей; выравнивание текста: по центру; семейство шрифтов: без засечек; размер шрифта: 40 пикселей; белый цвет; -webkit-text-stroke-color: черный; -webkit-text-stroke-width: 0,8 пикселей; текстовая тень: 0px 0px 5px черный; ширина: 100vw; высота: 5вх; цвет фона: снег; нижняя граница: 3 пикселя, сплошной черный; z-индекс: 999; } /*-----Снег-----*/ .снегопад { позиция: абсолютная; верх: 0; слева: 0; ширина: 100%; высота: 100%; события указателя: нет; } .снег { цвет фона: белый; высота: 10 пикселей; ширина: 10 пикселей; радиус границы: 50%; граница: 1 пиксель, сплошная черная; анимация: падение 4с линейное бесконечное; позиция: абсолютная; верх: -40 пикселей; слева: 10%; z-индекс: 1; } .snow:nth-child(1) { продолжительность анимации: 6 с; позиция: абсолютная; верх: -40 пикселей; осталось: 20%; } .snow:nth-child(2) { задержка анимации: 2 с; продолжительность анимации: 8 с; позиция: абсолютная; верх: -40 пикселей; осталось: 30%; } .snow:nth-child(3) { задержка анимации: 8 с; продолжительность анимации: 12 с; позиция: абсолютная; верх: -40 пикселей; осталось: 40%; } .snow:nth-child(4) { задержка анимации: 6 с; продолжительность анимации: 7 с; позиция: абсолютная; верх: -40 пикселей; осталось: 50%; } @ключевые кадры падают{ 0% { трансформировать: транслироватьY(0); } 100% { преобразование: TranslateY (110vh); } Соответствующий игровой проект Игра на совпадение