Как исправить анимацию, чтобы блок не пропадал?

Question

[Twelfth Doctor]

Здравствуйте! Подскажите, как исправить анимацию. У меня есть сайт, на котором из-за анимации пропадает блок. Мне же нужно, чтобы изображения на фоне плавно менялись, а не исчезали.

<div class="crossfade">
      <figure><div class="whitelabel">Если вы стали жертвой или хотите сообщить о происшествии, звоните на бесплатный круглосуточный телефон</div> <div class="redblock"><div class="redtext">+7*****</div></div></figure>
      <figure><div class="whitelabel">Если вы стали жертвой или хотите сообщить о происшествии, звоните на бесплатный круглосуточный телефон</div> <div class="redblock"><div class="redtext">+7 ****</div></div></figure>
      <figure><div class="whitelabel">Если вы стали жертвой или хотите сообщить о происшествии, звоните на бесплатный круглосуточный телефон</div> <div class="redblock"><div class="redtext">+7***</div></div></figure>
    </div>

В стилях:

figure {
  animation: imageAnimation 5s linear infinite 0s;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  opacity:0;
  z-index: 0;
  width:48%;
  height:350px;
  position:absolute;
  left:0;
  margin-left:23%;
  
}

 figure:nth-child(1) {
  background-image: url('http://***/wp-content/themes/protivnasilia/img/slide1.jpg');
}
 figure:nth-child(2) {
  animation-delay: 1s;
  background-image: url('http://***/wp-content/themes/protivnasilia/img/slide2.jpg');
}
 figure:nth-child(3) {
  animation-delay: 1s;
  background-image: url('http://***/wp-content/themes/protivnasilia/img/slide3.jpg');
}


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

https://jsfiddle.net/9z9km54o/

Answer 1

[DTX]

figure {
  animation: imageAnimation 3s linear infinite 0s;
}
figure:nth-child(3) {
  animation-delay: 2s;
}

https://jsfiddle.net/9z9km54o/6/

Answer 2

[tripcollor]

Просто рассчитать все правильно по времени анимации и ее задержки.
У вас все линейно, но если учесть задержку всех кадров то после последнего остается еще 2 секунды (т.к общее время 5сек), вот отсюда и такой промежуток