How to make a background image rotate flawlessly?

Question

I have the following problem:

I got a html text I am making transparent and having a space-themed image as its background-image, changing it from time to time on a website. The image rotates across the text. I am okay with the image rotating once and once again but then the image resets abruptly and it looks quite bad.

If you know a simple form of making the image rotate flawlessly I would be happy to read about it.

This is code I am using:

#FlawlessImageRotation {
  font-weight: bold;
  color: transparent;
  animation: rotateImages 7s linear infinite;
  background-image: url('path.webp');
  background-size: 69%; 
  background-clip: text;
  -webkit-background-clip: text; 
  -webkit-text-fill-color: transparent;
}

@keyframes rotateImages {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 100% 0, 200% 0, 300% 0;
  }
}

<h2><strong id="FlawlessImageRotation"> TEXT </strong> more text.<br/> Even more text.
</h2>

With this code the image abruptly resets over the 7s. I want the image to keep rotatig on the same image over and over, as a carousel.