I have a simple CSS slider that cycles through 4 background-images, however it flashes between images only on the first cycle; which is the most important. I assume most people won't watch a slider two times through. Here is a link so you can view the problem https://awesome-darwin-135a87.netlify.app , and here is the CSS.

.hero {
  background-color: var(--black);
  background-image: url('./images/1.jpg');
  height: 100vh;
  background-position: center;
  background-size: cover;
  padding: 0.5rem calc((100vw - 1200px) / 2);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  animation: slide 20s infinite;
}

@keyframes slide {
  25%{
    background-image: url('./images/2.jpg');
  }
  50%{
    background-image: url('./images/3.jpg');
  }
  75%{
    background-image: url('./images/4.jpg');
  }
  100%{
    background-image: url('./images/1.jpg');
  }
}

Ideally I would like a way to defer the HTML until the images have loaded , but there might be a more simple solution to my problem. I have tried to compress the image files and it reduced the time of the flash but did not fix the problem. Another solution I had in mind would be to fade in each image from the black background so it wouldn't flash and look more natural, but I'm unsure how to implement two animations for the set of images. Any help would be appreciated.