<img class="animation-image" src='https://picsum.photos/id/237/300/300' width='300' height='300' alt='test1'>

<img class="animation-image" src='https://picsum.photos/id/238/300/300' width='300' height='300' alt='test2'>

<img class="animation-image" src='https://picsum.photos/id/239/300/300' width='300' height='300' alt='test3'>

.animation-image {
  animation: slide 3s ease infinite;
}
@keyframes slide {
  50% {
    transform: translatey(100px);
  }
}
.ready-1 {
  animation-delay: 0s;
}
.ready-2 {
  animation-delay: 2s;
}
.ready-3 {
  animation-delay: 4s;
}

const images = document.querySelectorAll(".animation-image")

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min)
}

function showNextImages(images, classNames) {
  const nextImages = getNextImages(images.length - 1, classNames.length)

  classNames.forEach((className, i) => {
    images[nextImages[i]].classList.add(className);
  })
}

function getNextImages(numImages, numClassNames) {
  const nextImages = []

  while (nextImages.length < numClassNames) {
    const randIndex = getRandomNumber(0, numImages)

    if (nextImages.indexOf(randIndex) === -1) nextImages.push(randIndex)
  }

  return nextImages;
}

showNextImages(images, ["ready-1", "ready-2", "ready-3"])