CSS анимация баннера ⇐ CSS

[Anonymous]

Я хочу создать анимацию баннера с помощью CSS и HTML, первое изображение будет плавно появляться и исчезать до второго изображения, второе будет проявляться и исчезать до третьего, а третье будет исчезать до первого. изображение:

Код: Выделить всё

#animation{
position: relative;
width: 1000px;
height: 350px;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
/*animation-iteration-count: infinite;
animation-name: Banner_change;
animation-duration: 15s; */
img{
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
animation-name: Banner_change;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 15s;
&:nth-of-type(1){
z-index: 1;
animation-delay: 0s;
}
&:nth-of-type(2){
z-index: 2;
opacity: 0;
animation-delay: 5s;
}
&:nth-of-type(3){
z-index: 3;
opacity: 0;
animation-delay: 10s;
}

}

}

@keyframes Banner_change{
0% {
opacity: 0;

}
17% {
opacity: 1;
}
25% {
opacity: 1;

}
92% {
opacity: 0;
}
100% {
opacity: 0;

}
}

на основе этого https://codepen.io/johnbacon/pen/wgYOXW кода, но с тремя изображениями, наложенными друг на друга.
блок html:

Код: Выделить всё

[img]img/banner1.jpg[/img]
[img]img/banner2.png[/img]
[img]img/banner3.jpg[/img]

Я почти заработал с приведенным выше кодом, но циклы очень странные: для первого изображения не будет полностью установлена ​​непрозрачность 1, а цикл иногда будет слишком быстрым или слишком медленным , вместо постоянных 5 секунд на изображение (включая время появления и исчезновения), это может быть связано с настройками задержки, но я не знаю, как это настроить.

Подробнее здесь: https://stackoverflow.com/questions/790 ... mation-css