curved path slider in css

I'm new to css animations I'm trying to realize a css ellitic curve dot slider, and I got a satysfing result, the problem is that the effect get executed from the right side of the screen I want it executed from the left side of the screen, when I click the dot the picture must appera from the left side of the screen not from the right, this is my code:

<div class="container">
                      <div class="wrapper">
                          <div class="image">
                              <img class="first active" src="bbt-rosa.png">
                              <img  src="bbt-verde.png">
                              <img class="last" src="bbt-viola.png">
                          </div>
                        <div class="direct-link-container">
                           <div class="direct-link-wrapper">
                               <div class="circle"></div>
                               <div class="circle"></div>
                               <div class="circle"></div>
                           </div>
                        </div>
                     </div>
                   </div>

                  .container {
                     position: relative;
                     width: 100vw;
                     height: 100vh;

                     .wrapper {
                         height: 100%;
                         width: 100%;
                         display: flex;
                         flex-direction: column;
                         align-items: center;
                         justify-content: center;
                         position: absolute;
                         top: 50%;
                         left: 50%;
                         transform: translate(-50%, -50%);
                         .image  {
                            img {
                              width: 150px;
                              height: 250px;
                              display: none;
                              margin-bottom: 50px;
                           }
                          .active {
                              display: block;
                              width: 5.7%;
                              position: absolute;
                              top: -5%;
                              left: 47%;
                              animation: circle 1s;
                              transform-origin: 0px 700px;
                              animation-fill-mode: forwards;
                              animation-direction: alternate;
                             }
                            }

                            .direct-link-container {
                              .direct-link-wrapper {
                                 display: flex;
                                 justify-content: space-between;

                                .circle {
                                  height: 20px;
                                  width: 20px;
                                  border: 2px solid black;
                                  border-radius: 50%;
                                  margin: 5px;
                                  &:after {
                                    content: '';
                                    display: block;
                                    height: 2px;
                                    width: 2px;
                                    border: 2px solid black;
                                    border-radius: 50%;
                                    margin: 5px;
                                   }
                                  }
                                 }
                                }
                               }
                              }



                   @keyframes circle {
                        0% {
                           transform: translate(500px,-250px) scaleX(0.10) scaleY(0.10) ;
                        } 100% {
                           transform: translate(0px,0px) scaleX(1.00) scaleY(1.00) ;
                        }
                   }

can someone help me understand?