Сделать паузу между анимациями (CSS)

Question

Сделать паузу между анимациями (CSS)

Olga Ученик (134), на голосовании 1 год назад

Подскажите, пожалуйста, как можно сделать паузу (например, 5s) между анимациями слайдов: например, когда 1 картинка с текстом полностью загрузилась, прошло 5s с ней на странице, и затем пошла загрузка второй картинки с текстом. У меня пока есть вариант, когда картинки постепенно меняют друг друга без паузы.
<style>
.slides ul li {
opacity: 0;
position: absolute;
top: 0;
padding: 0;
animation-name: anim_slides;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: forwards;
}

.slides ul li img {
display: block;
width: 100%;
height: auto;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}

.slides ul li div {
left: 33%;
margin: 0 auto;
position: absolute;
z-index: 5;
top: 20%;
animation-name: anim_titles;
animation-duration: 10s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
animation-fill-mode: forwards;
}

@keyframes anim_titles {
0% {
opacity: 0;
}
25% {
opacity: 0.5;
}
50% {
opacity: 1;
}
75% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}

@keyframes anim_slides {
0% {
opacity: 0;
}
25% {
opacity: 0.5;
}
50% {
opacity: 1;
}
75% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}

.slides ul li:nth-child(2),
.slides ul li:nth-child(2) div {
animation-delay: 5s;
}
.slides ul li:nth-child(3),
.slides ul li:nth-child(3) div {
animation-delay: 12s;
}
</style>
<body>

<div class='slides'>
<ul>

<li>
<img src='bg1.jpg' title='kd-1' alt='kd-1' height=400>
<div class='text-1'>
<p>Kids are the best</p>
<p>explorers in the world</p>
</div>
</li>
<li>
<img src='bg2.jpg' title='kd-2' alt='kd-2' height=400>
<div class='text-2'>
<p>Perfect learned</p>
<p>for your child</p>
</div>
</li>
</ul>
</div>
</body>

Answer 1

Dlazder Мудрец (16875) 1 год назад

Есть delay