Наверняка есть более простой способ сделать это? HTML, CSS, JS

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

В настоящее время я могу думать только о том, чтобы написать очень длинный блок кода для каждой строки, и это не будет случайным образом. Мне нужно будет установить левое значение и ширину, чтобы это казалось случайным, но, очевидно, это будет просто заранее запрограммированная последовательность, которая сохранит повторяющийся.

Конечно, это можно сделать с меньшим количеством кода в JS и фактически генерировать случайным образом?

В настоящее время у меня есть следующие ключевые кадры:

@keyframes slider {
    0%  {width: 75%; left: 10%;}
    5%  {width: 66%; left: 18%;}
    10% {width: 60%; left: 26%;}
    15% {width: 31%; left: 34%;}
    20% {width: 26%; left: 38%;}
    25% {width: 20%; left: 44%;}
    30% {width: 10%; left: 52%;}
    35% {width: 8%; left: 71%;}
    40% {width: 7%; left: 82%;}
    45% {width: 5%; left: 89%;}
    50% {width: 0%; left: 94%;}
    55% {width: 12%; left: 79%;}
    60% {width: 21%; left: 72%;}
    65% {width: 35%; left: 59%;}
    70% {width: 38%; left: 51%;}
    75% {width: 47%; left: 41%;}
    80% {width: 53%; left: 33%;}
    85% {width: 70%; left: 19%;}
    90% {width: 84%; left: 11%;}
    95% {width: 89%; left: 6%;}
    100%{width: 100%; left: 0%;}
}

Теперь я могу связать это с необходимыми мне элементами, как показано ниже:

.animation :nth-child(1) {
    top: 10%;
    animation: slider 3s infinite;
}

если это поможет вам получить представление о том, что я делаю, стиль div будет следующим:

.an {
    height: 10px;
    position: absolute;
    background-color: #09a07a;
    top: 0;
}

Это означает, что мне нужно написать один из этих повторяющихся блоков кода для каждого дочернего элемента. Я не прошу вас написать за меня весь код, а лишь некоторые рекомендации относительно того, на что мне следует обратить внимание при подходе к JS-блоку, который будет:

Случайным образом заставить целевой элемент перемещаться с одной стороны экрана на другую, при случайном увеличении и уменьшении ширины. Это будет применяться к каждому элементу случайным образом, чтобы сэкономить блок кода для каждого элемента, но также сэкономить на написании такого большого ключевого кадра. .