Curved path Transform: translateX

问题

I'm trying to realize a css elliptical curve dot slider, and I got a satysfing result with transform: translateX, the problem is that the effect gets executed in a linear way.

I want it executed in a curved way.

When I click the dot the picture must slide following an elliptical path, this is my code:

 .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%);
          }
         }

<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>

来源：https://stackoverflow.com/questions/59749211/curved-path-transform-translatex