راجب تمرین لودینگ وبسایت

چیکار کنم که ترتیب دایره‌ها از راست به چپ باشه.....
<!DOCTYPE html>
<html lang="fa" dir="ltr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="../assets/css/style.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <div class="container">
    <span class="anime1"></span>
    <span class="anime2"></span>
    <span class="anime3"></span>
  </div> 
</body>
</html>
css:
@font-face {
    font-family: vazir-medium;
    src: url(../fonts/Vazir-Medium.eot) format("eot"),
    url(../fonts/Vazir-Medium.woff) format("woff"),
    url(../fonts/Vazir-Medium.woff2) format("woff2");
    font-weight: 700;
    font-style: normal;
}
*,body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
   font-family: vazir-medium;
}
body{
    direction: rtl;
}
a {
    text-decoration: none;
}
li,ul,ol{
    margin: 0;
    padding: 0;
    list-style: none;
    }
    .container .anime1,.anime2,.anime3{
        position: relative;
        direction: ltr;
        margin: 50px;
        display: inline-block;
        animation: toop 2s ease infinite;
       }
    @keyframes toop{
        0%{transition:steps(3,start)  ;}
        50%{transform: scale(2);}
        100%{transform: scale(2);}
    }
.anime1{
    width: 20px;
    height: 20px;
    background-color: black;
    border-radius: 50%;
    margin: 400px;
    animation-delay: 0.2s;
}
.anime2{
    width:30px ;
    height: 30px;
    background-color: black;
    border-radius: 50%;
    animation-delay:0.4s;
}
.anime3{
    width:40px ;
    height: 40px;
    background-color: black;
    border-radius: 50%;
    animation-delay:0.6s;
}