Pause CSS Animation For n Seconds

I animated a simple automatic image slider, but the first and last images take longer, while the middle images are quite fast.

How can I even the times and pause each image for let's say 6 seconds and then continue. I have tried the animation-play-state:paused;, but I am not sure how to add time.

Here is some of the code I have:

    .image-container {
      -webkit-animation-name: autoplay;
      animation-name: autoplay;
      -webkit-animation-duration: 20s;
      animation-duration: 20s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }

     @-webkit-keyframes 
  autoplay {  
    0% {
   left: 0px;
  }
  
    25% {
   left: -1920px;
  }
    
    50% {
   left: -3840px;
  }
  
    100% {
   left: -5760px;
  }
}

@keyframes 
autoplay {  
  0% {
 left: 0px;
}

  25% {
 left: -1920px;
}
  
  50% {
 left: -3840px;
}

  100% {
 left: -5760px;
}
}