slider animation in css not working properly

Question

i have a slider made in owl carousel in which i have added an extra image and done some css for its animation, the live url of the website is live website

i have done the following css to make the image move according to the other images in slider:

@-webkit-keyframes test {
  0% {
    background-image: url('assets/slider1.2.png');
  }
  25% {
    background-image: url('assets/slider2.2.png');
  }
  75% {
    background-image: url('assets/slider3.2.png');
  }
  100% {
    background-image: url('assets/slider4.2.png');
  }
}

#bg1 {
  float: left;
  left: 0;
  background-image: url('assets/slider1.2.png');
  transition: 6s ease-in-out;
  -webkit-animation-name: test;
  -webkit-animation-duration: 6s;
  -webkit-animation-iteration-count: 3000;
  -webkit-animation-delay: 6s;
  -webkit-animation-direction: initial;
  -webkit-animation-timing-function: steps(1, end);
}

#bg1.bgactive {
  background-image: url('assets/slider4.2.png');
}

.animate-left {
  transform: translateX(-100%);
  height: 90%;
  border-radius: 30px;
  padding: 45px 40px;
  width: 50%;
  position: absolute;
  top: 0;
  left: 0;
  background-position: 25% 75%;
  display: flex;
  align-items: center;
  opacity: 0;
  transition: 1s ease-in-out;
}

.animate-left.active {
  opacity: 1;
  transform: translateX(0%);
}

<div class="animate-left active">
  <div class="bg-shape" id="bg1">
  </div>
</div>

as you can see in the website, in the first two slides all images are coming fine, in th third and forth slides the image which i did css is blinking, not coming properly. can anyone please tell me what did i do wrong in here, thanks in advance