From what I can assume between the 100% and the going back to 0% there’s no background, I would recommend that you add your initial background at 100% and add one more step to the process that way it’ll just start over.

Something like:

@keyframes animSlideshow {
    0% {
        background-image: url('http://lorempixel.com/600/600');
    }
    20% {
        background-image: url('http://lorempixel.com/600/600/sports');
    }
    40% {
        background-image: url('http://lorempixel.com/600/600/city');
    }
    60% {
        background-image: url('http://lorempixel.com/600/600/animals');
    }
    80% {
        background-image: url('http://lorempixel.com/600/600/people');
    }
    100% {
        background-image: url('http://lorempixel.com/600/600');
    }
}

This way it ends where it started and you wouldn’t notice a blink.

Just want to start off by saying that I know questions like this have been asked and I’ve looked at all the ones I could find on the first few pages of google with no luck.

Problem:

I have a landing page with a div that stretches the width of the screen and is using a CSS transition to fade between 5 different images. They are all of equal size and aspect ratio so I know it can’t be a problem with that. The cross fade between the images is smooth but once the transition is done, they flicker then that transition to the next image starts (smoothly again).

Some things I’ve done to try and fix it:

• Saved all the images to reference locally
• Resized all the images to have the same size and aspect ratio
• Added a simple image preload script in JS (Found in an answer)
• Gave more time between transitions to allow some load time leniency
• Scaled down all the images in case they were loading slow due to file size
• Tried in Firefox, Opera, and Edge with same problem (With added browser specific attributes)

I’m not sure what to do at this point but I know there are smarter people out there that will probably have a solution so I would like to thank the people who offer suggestions in advanced for giving me a hand.

/*** CSS For .container **/

.container {
  display: flex;
  width: 100% !important;
  padding: 1rem 0;
  margin: 0;
  height: 100vh;
  justify-content: center;
}


/*** CSS For .container-slideshow ***/

.container-slideshow {
  margin-left: 0;
  margin-right: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  animation: animSlideshow 28s ease infinite;
}


/*** CSS Animation ***/

@keyframes animSlideshow {
  0% {
    background-image: url('http://lorempixel.com/600/600');
  }
  25% {
    background-image: url('http://lorempixel.com/600/600/sports');
  }
  50% {
    background-image: url('http://lorempixel.com/600/600/city');
  }
  75% {
    background-image: url('http://lorempixel.com/600/600/animals');
  }
  100% {
    background-image: url('http://lorempixel.com/600/600/people');
  }
}

<div class="container white-text container-slideshow">

  <div class="container-content">
    <h1>Welcome to Lorem Impsum,</h1>
    <h3>This is just some sample text.</h3>
  </div>

</div>

It only does the flickering the first time through the animation so I’m guessing it has something to do with changing the background image to an unloaded picture. Is doing it in this example for me at least. (If it isn’t for anyone else I gonna take it as a hardware issue on my end)

Here is a screen shot from my end just in case I’m the only one who sees it:
Gyazo GIF