CSS image animation crossfade loop - how do I make one image delay its fading animation (stay on page) longer than the others?

Question

I'm trying to create an affect where the initial image is displayed longer than the subsequently animated images. I'd like the first item to appear for 10 seconds and the others to display for 6. I tried tweaking the timings, forcing an opacity for the first image, and noting seems to quite work. I feel like I'm missing something crucial about how this works.

I think I get how the following images get their timing of 6 seconds, but what is determining the animation timing of the first one? Can I just tell it to wait 4 seconds before it begins the loop so the first image rests on the page longer?

.plattxt,
.goldtxt,
.coptxt {
  color: #6b6052;
  text-align: right;
  font-size: 12px;
  position: absolute;
  bottom: 0;
  width: 86%;
  margin-top: 93px;
  top: 0;
  font-weight: bold;
}

.item {
  width: 100%;
  height: 100px;
  display: inline-block;
  position: relative;
}

.items {
  background: white;
  border-radius: 10px;
  border: 4px solid #f6921e;
  min-height: 120px
}

.item .img-thumbnail {
  height: 100px;
  display: inline-block;
  position: relative;
}

.item img {
  max-height: 85px;
  top: 55px;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  max-width: 230px;
  position: absolute;
}

.items h3 {
  text-align: center;
  font-size: 25px;
  color: #6b6052;
  font-weight: bold;
  margin-top: 24px;
  line-height: 30px;
}

#crossfade>.fadecont {
  display: block;
  color: transparent;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 30s linear infinite 0s;
  -moz-animation: imageAnimation 30s linear infinite 0s;
  -o-animation: imageAnimation 30s linear infinite 0s;
  -ms-animation: imageAnimation 30s linear infinite 0s;
  animation: imageAnimation 30s linear infinite 0s;
}

#crossfade>.fadecont:nth-child(2) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  -ms-animation-delay: 6s;
  animation-delay: 6s;
}

#crossfade>.fadecont:nth-child(3) {
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  -ms-animation-delay: 12s;
  animation-delay: 12s;
}

#crossfade>.fadecont:nth-child(4) {
  -webkit-animation-delay: 18s;
  -moz-animation-delay: 18s;
  -o-animation-delay: 18s;
  -ms-animation-delay: 18s;
  animation-delay: 18s;
}

#crossfade>.fadecont:nth-child(5) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}

@-webkit-keyframes imageAnimation {
  0% {
    opacity: 0;
    -webkit-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -webkit-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@-moz-keyframes imageAnimation {
  0% {
    opacity: 0;
    -moz-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -moz-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@-o-keyframes imageAnimation {
  0% {
    opacity: 0;
    -o-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -o-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@-ms-keyframes imageAnimation {
  0% {
    opacity: 0;
    -ms-animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    -ms-animation-timing-function: ease-out;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

@keyframes imageAnimation {
  0% {
    opacity: 0;
    animation-timing-function: ease-in;
  }
  8% {
    opacity: 1;
    animation-timing-function: ease-out;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 0
  }
  100% {
    opacity: 0
  }
}

<div class="col-md-6 " style="margin-top: 20px;">
  <div class="items">
    <div class="row">
      <div class="col-md-6">
        <h3><i>Thank You to Our<br>2021 Sponsors!</i></h3>
      </div>

      <div class="col-md-6">
        <div class="item" id="crossfade">
          <div class="fadecont">
            <img class="img-responsive" src="#" />
            <span class="plattxt">Platinum</span>
          </div>
          <div class="fadecont">
            <img class="img-responsive" src="#" />
            <span class="goldtxt">Gold</span>
          </div>
          <div class="fadecont">
            <img class="img-responsive" src="#" />
            <span class="goldtxt">Gold</span>
          </div>
          <div class="fadecont">
            <img class="img-responsive" src="#" />
            <span class="goldtxt">Gold</span>
          </div>
          <div class="fadecont">
            <img class="img-responsive" src="#" />
            <span class="coptxt">Copper</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>