<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.getElementsByClassName("animation-image");

let nextImages = [];
showNextImages();

function showNextImages() {
  getNextImages();
  images[nextImages[0]].classList.add("ready-1");
  images[nextImages[1]].classList.add("ready-2");
  images[nextImages[2]].classList.add("ready-3");
}

function getNextImages() {
  while (nextImages.length < 3) {
    var r = Math.floor(Math.random() * images.length);
    if (nextImages.indexOf(r) === -1) nextImages.push(r);
  }
}