How to make image move in a frame infinitely?

okay so I have this right here:

html:

<div class="object">
        <img src="https://www.direktorenhaus.com/wp-content/uploads/2018/03/Kabali-After-Puja-6-1-800x533.jpg" alt="pic">
      </div>

css:

.object {
  animation: MoveLeftRight 10s linear infinite;
  position: absolute;
  top: 0;
  right: 0;
}

@keyframes MoveLeftRight {
  0%, 100% {
    right: 0;
  }
  50% {
    right: 300px;
  }
}

demo: https://jsfiddle.net/kte1ar3p/

but instead of it moving left and right, right to left all the time, i want to to like go through... i.e when it goes from e.g right to left, it will come out again from right to left. i dont know if this makes sense as I am explaining...

example of how i want it:

https://www.designmuseumgent.be/en/

the first moving picture on the left.

like moving a big picture into a small frame.