Surely there is an easier way to do this? HTML, CSS, JS

I’m creating some animated lines that run from one side of the page to the other, while they are doing this they change in size, there are currently 5 animated lines and I may add more, but i also want them all to move across the screen at different intervals, change size at different intervals and if possible at random, so the animation never truly repeats itself.

Currently I can only think to write a a really long block of code for each line and it wouldn’t be at random I would have to set left and width so it seems random, but it would evidently just be a pre programmed sequence that would keep repeating itself.

Surely this can be done with less code in JS and actually at random be randomly generated?

Currently I have the below keyframes:

@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%;}
}

Now I can link this to the elements I require as per below:

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

if it helps you get a picture of what im doing, the div is styled as below:

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

This means i have to write one of those repeating code blocks for each child element. I’m not asking you to code the whole thing for me, but just some guidance as to what i should look at when approaching a JS block that will:

Randomly make the element targeted move from one side of the screen to the other, while growing and shrinking in width randomly, this will be applied to each element randomly to save having a code block for each element, but also save writing such a large keyframe.