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 first active">
          <img src="bbt-rosa.png">
        </div>
        <div class="image">
          <img  src="bbt-verde.png">
        </div>
        <div class="image last">
          <img src="bbt-viola.png">
        </div>
      </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 class="footer">
        <img src="footer.png" alt="">
      </div>
    </div>

.container {
  position: relative;
  width: 80vw;
  height: 100vh;
  margin: auto;
  .wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 43.5%;
    bottom: 8px;
    transform: translateX(-50%);
    .image  {
      width: 50%!important;
      height: 550px!important;
      img {
        width: 20%!important;
        height: 100%!important;
      }
    }

    .image:nth-child(1) {
      position: relative;
      right: 250px;
    }
    .image:nth-child(2) {
      position: relative;
      left: 275px;
    }
    .image:nth-child(3) {
      position: relative;
      left: 375px;
    }
    .active {
      display: block;
      width: 5.7%;
      animation: circle 1s;
      transform-origin: 0px 700px;
      animation-fill-mode: forwards;
      animation-direction: alternate;
    }

  }
  .direct-link-container {
    .direct-link-wrapper {
      position:absolute;
      bottom: 0;

      display: flex;
      .circle {
        height: 15px;
        width: 15px;
        border: 2px solid black;
        border-radius: 50%;
        margin: 2px;
      }
    }
  }
  .footer {
    width: 1344px;
    img {
      width: 100%;
    }
  }
}

@keyframes circle {
    from {
      transform: translateX(0%);
    }
    to {
      transform: translateX(100%);
    }
}

can someone help me understand?