How to add delay on image fade and only make one image visible at the time?

I have a css fader, but it fades way to fast for anyone to read, and I cant seem to find a solution. Once a image is fading, its also going 50% into the other image showing both images at 50%, how can I go around this so it only shows 1 image at the time? Thanks! There's always a problem with me and adding code somehow.. here's a codepen link.

HTML:-

  <div class='slider'>
    <img class="slide1" style="background: url(https://i.imgur.com/Jor6iZe.png)no-repeat center;" alt="">
        <img id="img2" class="slide1" src="http://i.imgur.com/3N7tUT2.png">
    <img class="slide2" style="background: url(https://i.imgur.com/h797HTW.png)no-repeat center;" alt="">
        <img id="img2" class="slide2" src="http://i.imgur.com/0GQZobp.png">
    <img class="slide3" style="background: url(https://i.imgur.com/n04pyfC.png)no-repeat center;" alt="">
        <img id="img2" class="slide3" src="http://i.imgur.com/lfRhiqe.png">
  </div>

CSS

.slider {
  max-width: 1140px;
  height: 200px;
  margin: 20px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
      background-size: cover;
    animation:fade 15s infinite;
-webkit-animation:fade 5s infinite;

}
.slide2 {
      background-size: cover;
    animation:fade2 15s infinite;
-webkit-animation:fade2 5s infinite;
}
.slide3 {
      background-size: cover;
    animation:fade3 15s infinite;
-webkit-animation:fade3 5s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 15}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 15}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 15}
  100% { opacity: 0}
}

Codepen Link

Solution

HTML

<div class='slider'>
    <img class="slide1" style="background: url(https://i.imgur.com/Jor6iZe.png)no-repeat center / cover;" alt="">
    <img class="slide2" style="background: url(https://i.imgur.com/h797HTW.png)no-repeat center / cover;" alt="">
    <img class="slide3" style="background: url(https://i.imgur.com/n04pyfC.png)no-repeat center / cover;" alt="">
</div>

CSS

.slide1 {
    animation:fade 10.5s infinite;
    -webkit-animation:fade 10.5s infinite ;

}
.slide2 {
    animation:fade1 10.5s infinite;
    -webkit-animation:fade1 10.5s infinite;
}
.slide3 {
    animation:fade2 10.5s infinite;
    -webkit-animation:fade2 10.5s infinite;
}

@keyframes fade
{
    0%   { opacity: 1 }
    28.57% { opacity: 1 }
    30.95% { opacity: 0 }
    97.61% { opacity: 0 }
    100% { opacity: 1 }
}
@keyframes fade1
{
    0%   { opacity: 0}
    30.95% { opacity: 0 }
    33.33% { opacity: 1 }
    61.9% { opacity: 1 }
    64.28% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes fade2
{
    0%   { opacity: 0}
    64.28% { opacity: 0 }
    66.66% { opacity: 1 }
    95.23% { opacity: 1 }
    97.61% { opacity: 0 }
    100% { opacity: 0 }
}