CSS animacja ładowania, potrzebne kilka @keyframes?

pytanie zadane 24 grudnia 2020 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)

Cześć, mam problem z "optymalizacją" mojej niedoszłej animacji. To jest mój początek jeżeli chodzi o animację, więc wybaczcie jak napisałem bzdury docelowo to ma być kilka kulek które przesuwają się z lewej do prawej strony. Problem mam, z tym, że podczas animacji się na siebie nakładają, po animacji są w różnych miejscach - rozumiem dlaczego tak jest bo taki mam kod. Natomiast jak oddzielić te kulki żeby animację się zaczynały w różnych miejscach? Jedyny pomysł na który wpadłem to to, żeby stworzyć kilka @keyframes, ale to wydaje się kompletnie nieoptymalne, za dużo byłoby kodu. Dodam, że nie chciałbym używać do tego JS. Macie może jakieś wskazówki?

JSFiddle: https://jsfiddle.net/wc8bqcmg/
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/anime.css">
</head>
<body>
    <div class="stage">
        <figure class="ball"></figure>
        <figure class="ball" id="red_ball"></figure>
    </div>
</body>
</html>

CSS:

@keyframes slide {
     0% {
         left: 0;
         top: 0;
     }

     100% {
         left: 100%;
         top: 0;
     }
 }



.stage {
    top: 0;
    left: 0;
    background: #f3e9d2;
    position: fixed;
    min-width: 100%;
    height: 100%;
}

.stage .ball {
    animation: slide 3s ease-in-out;
}

.ball {
    background: #2db34a;
    border-radius: 50%;
    height: 10px;
    position: absolute;
    width: 10px;
}

#red_ball {
    background: red;
    height: 30px;
    width: 30px;
    top: 50px;
}