CSS keyframes animation glitching in first cycle but running smoothly in following cycles

Issue

I created a CSS keyframes animation with 5 frames where the background image would fade and change to the next image. The animation works like its supposed to in all cycles except during the first cycle where it glitches before each transition. How to fix this?

HTML:

<div class="container"></div>

CSS:

@keyframes animation1 {
    0%, 15%{background-image: url("https://i.imgur.com/IzY1cRC.jpeg");}
    20%, 35%{background-image: url("https://i.imgur.com/Bq4PJjC.jpeg");}
    40%, 55%{background-image: url("https://i.imgur.com/43idGF1.jpg");}
    60%, 75%{background-image: url("https://i.imgur.com/OMa9YYH.jpg");}
    80%, 95%{background-image: url("https://i.imgur.com/CTLFd8t.jpg");}
    100%{background-image: url("https://i.imgur.com/IzY1cRC.jpeg");}
}
.container{
    height: 300px;
    width: 550px;
    background-image: url("https://i.imgur.com/IzY1cRC.jpeg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation-name: animation1;
    animation-duration: 25s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

Extremely grateful for any help this has been hindering a couple of projects for a good time.

Solution

The first time the animation plays, images will not be loaded yet, the browser will fetch only when they're actually needed. While the image is loading, the default background will be displayed (in this case, transparent, which will ultimately show the white background of the body)

You can 'pre-load' the images. So the browser already had the image data in cache when it's needed for the animation. There's different techniques for pre-loading. A straightforward way is to add an invisible element that requires all the images used in the animation.

In the example below, we add an 'invisible' :after element that loads all images.

.container::after {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  z-index: -1;
  content: url(https://i.imgur.com/IzY1cRC.jpeg) url(https://i.imgur.com/Bq4PJjC.jpeg) url(https://i.imgur.com/43idGF1.jpg) url(https://i.imgur.com/OMa9YYH.jpg) url(https://i.imgur.com/CTLFd8t.jpg) url(https://i.imgur.com/IzY1cRC.jpeg);
}

@keyframes animation1 {
  0%,
  15% {
    background-image: url("https://i.imgur.com/IzY1cRC.jpeg");
  }
  20%,
  35% {
    background-image: url("https://i.imgur.com/Bq4PJjC.jpeg");
  }
  40%,
  55% {
    background-image: url("https://i.imgur.com/43idGF1.jpg");
  }
  60%,
  75% {
    background-image: url("https://i.imgur.com/OMa9YYH.jpg");
  }
  80%,
  95% {
    background-image: url("https://i.imgur.com/CTLFd8t.jpg");
  }
  100% {
    background-image: url("https://i.imgur.com/IzY1cRC.jpeg");
  }
}

.container {
  height: 300px;
  width: 550px;
  background-image: url("https://i.imgur.com/IzY1cRC.jpeg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  animation-name: animation1;
  animation-duration: 25s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

<div class="container"></div>

Answered By - Lars