CSS слайдер — Накладываются изображения после 4 слайда при использовании animation: round infinite и animation-delay, как быть?

Question

[mantruegood]

Вот сам код HTML и CSS который я использую пример можно посмотреть вот тут zelsiteseo.ru блок с футбольной формой:

<div class="container_slider_css">
<img class="photo_slider_css" src='images/blockfoot/1.png' style="width:29%; position: absolute; margin-top:25px;" alt="" />
<img class="photo_slider_css" src='images/blockfoot/2.png' style="width:29%; position: absolute; margin-top:25px;" alt="" />
<img class="photo_slider_css" src='images/blockfoot/3.png' style="width:29%; position: absolute; margin-top:25px;" alt="" />
<img class="photo_slider_css" src='images/blockfoot/4.png' style="width:29%; position: absolute; margin-top:25px;" alt="" />
<img class="photo_slider_css" src='images/blockfoot/5.png' style="width:29%; position: absolute; margin-top:25px;" alt="" />
<img class="photo_slider_css" src='images/blockfoot/6.png' style="width:29%; position: absolute; margin-top:25px;" alt="" />
<img class="photo_slider_css" src='images/blockfoot/7.png' style="width:29%; position: absolute; margin-top:25px;" alt="" />
<img class="photo_slider_css" src='images/blockfoot/8.png' style="width:29%; position: absolute; margin-top:25px;" alt="" />
</div>

.container_slider_css{height:300px;position:relative}
.photo_slider_css{position:absolute; animation:round 16s infinite; opacity:0;width:100%}
@keyframes round {
25%{opacity:1}
40%{opacity:0}
}
img:nth-child(8){animation-delay:28s} 
img:nth-child(7){animation-delay:24s}
img:nth-child(6){animation-delay:20s}
img:nth-child(5){animation-delay:16s}
img:nth-child(4){animation-delay:12s}
img:nth-child(3){animation-delay:8s}
img:nth-child(2){animation-delay:4s}
img:nth-child(1){animation-delay:0}

Пример кода брал от сюда там самый первый слайдер автоматический на CSS, решил доработать но не вышло :( подскажите как можно решить, что только не перепробовал...
Если указывать разные картинки то на 4 5 слайде начинают сливаться 1 картинка и 5 потом 2 и 6 3 и 7 и 4 и 8 а первые 4 показываются нормально.

Comments

[Ankhena]

Так на время посмотрите

[mantruegood]

Ankhena, а что с ним не так? Тут же 4 секунды разницы идет а они почему то смешиваются...

[Ankhena]

mantruegood, через 16 секунд второй раз запускается анимация первой картинки. В это же время вы запускаете анимацию пятой картинки первый раз.

[Ankhena]

mantruegood, и вот это уберите из кода

style="width:29%; position: absolute; margin-top:25px;"

Сначала расположите блок со слайдером в нужном месте, задайте ему размеры и отступы, а потом поместите в него картинки с одинаковыми стилями, прописанными в css.

[mantruegood]

Ankhena, вот поменял время но наслойка все равно идет, новые картинки быстрее появляются чем старые успевают спрятаться (((

[Ankhena]

mantruegood,

вот поменял

не вижу ))

Задавая вопрос, разумно прикладывать к нему песочницу на codepen.io или jsfiddle.net, чтобы можно было увидеть это "вот".

[mantruegood]

Ankhena, https://codepen.io/mantruegood/pen/YzPrXqd вот сделал

[Ankhena]

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

Когда вы увеличиваете animation-duration, не изменяя keyframes, увеличивается время видимости кадра.

[mantruegood]

Ankhena, а как это сделать,? просто там же в процентах а тут время... Я находил вот такой код - 0.5s ease-in-out но не знаю куда его примастить что бы работал...

[Ankhena]

mantruegood, и что, что проценты? Это всего лишь количество сотых долей. 25% от часа это 15 минут. Тут тоже самое.
Т.е. если для 4 кадров animation-duration было 16, полная видимость кадра на 25%, а полное скрытие на 40%, то для 8ми кадров будет 32s и 12% и 20% для аналогичного поведения. При тех же задержках в 4s. Если их будет 7, то пропорционально. Если вы хотите снизить задержку до 3s, то пересчитайте проценты.

[Ankhena]

mantruegood,

0.5s ease-in-out

если второго времени не указано, то 0.5s это время анимации, а ease-in-out временная функция для кадров.

[mantruegood]

Ankhena, Спасибо! Получилось! Я пытался наобум найти верное значение этих процентов, но не думал чо как то можно высчитать ) благодарю. Я в CSS профан :)

[mantruegood]

Ankhena, А подскажите как посчитать это если будет другое время и скорость у animation-delay? Я просто хочу понять это до конца )) в смысле на калькуляторе, просто не уловил как это сделать если скорость изменить...

[mantruegood]

Ankhena, попробовал поменять, оказалось на скорость в секундах это не влияет, влияет на количество картинок. ) Еще раз спасибо!

[Ankhena]

mantruegood, слушайте, это задачка типа из пункта А в пункт Б вышел поезд с одной скоростью, а на встречу ему другой с другой скоростью. А у ваших даже скорость одинаковая.
CSS тут вообще не при чем.

Про параметры анимации тут почитайте https://html5book.ru/css3-animation/