Почему мой слайдер мигает в первом раунде?

Question

Мой слайдер «мигает» в первом раунде скольжения и после этого скользит идеально, без каких-либо миганий. Как убрать мигание?

Мой код:

HTML:

<div class="slider"></div>

CSS:

* {
    margin: 0px;
    padding: 0px;
}

body {
    background-color: #444;
}

.slider {
    width: 600px;
    height: 400px;

    margin: 100px auto;

    background-image: url(image/1.jpg);
    background-repeat: no-repeat;
    background-size: cover;

    animation: slide 12s infinite;
    transition: 600ms;

    box-shadow: 0 0px 50px rgba(0, 0, 0, 1), inset 0 0px 400px rgba(0, 0, 0, .6);
    border-radius: 5px;
}

@keyframes slide {
    20% {
        background-image: url(image/2.jpg);
    }
    40% {
        background-image: url(image/3.jpg);
    }
    60% {
        background-image: url(image/4.jpg);
    }
    80% {
        background-image: url(image/5.jpg);
    }
    100% {
        background-image: url(image/1.jpg);
    }
}

Первый слайд раунд имеет такой эффект, когда он не является гладким, и после первого раунда другие раунды показывают, что я хочу, чтобы они были .. Любая помощь, пожалуйста? Извините, если пост не хороший, я пишу здесь впервые. Спасибо

Я пытался сделать слайдер полноэкранным, при мигающем остается прежним, это белый миг в течение первого раунда, нет белого мигания между слайдами после первого раунда

Answer 1

Как я уже упоминал в своем комментарии, мигание вызвано тем, что изображение еще не загружено в первом раунде. Вы можете попробовать предварительно загрузить изображения, добавив их в виде <img> тегов в скрытом div, например,

* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #444;
}

.slider {
  width: 600px;
  height: 400px;
  margin: 100px auto;
  background-image: url(https://via.placeholder.com/399);
  background-repeat: no-repeat;
  background-size: cover;
  animation: slide 12s infinite;
  transition: 600ms;
  box-shadow: 0 0px 50px rgba(0, 0, 0, 1), inset 0 0px 400px rgba(0, 0, 0, .6);
  border-radius: 5px;
}

@keyframes slide {
  20% {
    background-image: url(https://via.placeholder.com/400);
  }
  40% {
    background-image: url(https://via.placeholder.com/401);
  }
  60% {
    background-image: url(https://via.placeholder.com/402);
  }
  80% {
    background-image: url(https://via.placeholder.com/403);
  }
  100% {
    background-image: url(https://via.placeholder.com/404);
  }
}

.hidden {
  display: none;
}

<div class="slider"></div>

<div class="hidden">
  <img src="https://via.placeholder.com/399">
  <img src="https://via.placeholder.com/400">
  <img src="https://via.placeholder.com/401">
  <img src="https://via.placeholder.com/402">
  <img src="https://via.placeholder.com/403">
  <img src="https://via.placeholder.com/404">
</div>