smooth transition at animation end -css

Question

I have an animation that goes from right to left. the animation suddenly rewinds every time it ends. I want this transition to be soft.

Here is demo: https://codesandbox.io/s/exciting-hill-jz7n75?file=/src/style.css

here is html:

import "./style.css";
import GroupNft1 from "./assets/11.png";
import GroupNft2 from "./assets/22.png";
import GroupNft3 from "./assets/33.png";


export default function App() {
  const LeftToRight = () => {
    return (
      <div className="left-animation" style={{ width: 2350 }}>
        <img src={GroupNft1} alt="nft" />
        <img src={GroupNft2} alt="nft" />
        <img src={GroupNft3} alt="nft" />
      </div>
    );
  };
  return (
    <div className="App">
      <div className="img_content">
        <LeftToRight />
      </div>
    </div>
  );
}

and here is css:

.left-animation {
  position: relative;
  display: flex;
  gap: 12px;
  animation-name: leftToRightMove;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  -webkit-animation: leftToRightMove 3s linear infinite; /* Chrome, Safari, Opera */
  animation: leftToRightMove 3s linear infinite;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transition: 3s ease-in-out;
}

.left-animation img {
  display: inline-block;
}

@keyframes leftToRightMove {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(10%);
  }
}

@keyframes rightToLeftMove {
  from {
    transform: translateX(10%);
  }
  to {
    transform: translateX(-100%);
  }
}

After 3 seconds, when the animation ends, my problem starts at the point where the head turns.

thanks for your time