I have three images in html which have .image classname. Which I try to achieve is I am trying to make a slideshow loop around three images. Each image should stay min 2 secs, it can be 3 secs but all of them should stay same amount same amount of time.

I tried many combinations with keyframes this is one of my tries. The main problem which I encountered, I can’t display first image enough. If I display it enough order breaks and it displays earlier when loop ends so 3rd image and first image concur at the same time.

.image {
  position: absolute;
  object-fit: contain;
  opacity: 0;
}
.image:nth-child(1) {
  animation: slide 12s infinite;
}

.image:nth-child(2) {
  animation: slide2 12s infinite;
  animation-delay: 4s; /* 2nd image starts after 1st image disappears */
}

.image:nth-child(3) {
  animation: slide3 12s infinite;
  animation-delay: 8s; /* 3rd image starts after 2nd image disappears */
}

@keyframes slide {
  0% { transform: translateX(0); opacity: 1; }
  16% { transform: translateX(-100%); opacity: 0; } /* 1st image stays for 2s */
  33%, 100% { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide2 {
  0%, 33% { transform: translateX(100%); opacity: 0; }
  50% { transform: translateX(0); opacity: 1; } /* 2nd image stays for 2s */
  66% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(-100%); opacity: 0; }
}

@keyframes slide3 {
  0%, 66% { transform: translateX(100%); opacity: 0; }
  83% { transform: translateX(0); opacity: 1; } /* 3rd image stays for 2s */
  100% { transform: translateX(-100%); opacity: 0; }
}

Is there a fix for it? Or should I try something different?