0
Моя цель состоит в том, чтобы изображение оставалось на экране около 10 секунд - без увеличения продолжительности затухания (если возможно). Я пробовал общаться с процентами ключевого кадра, но я просто не могу понять, как это правильно. Любая помощь приветствуется.Fading background image slider with css: Как я могу заставить слайды оставаться на экране дольше?
.slider {
max-width: 300px;
height: 200px;
margin: 20px auto;
position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
position: absolute;
width: 100%;
height: 100%;
}
.slide1 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371566801_p17tbs0rrjqdt1u4dnk94fe4b63.jpg)no-repeat center;
background-size: cover;
animation:fade 30s infinite;
-webkit-animation:fade 30s infinite;
}
.slide2 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371565525_p17tbqpu0d69c21hetd77dh483.jpeg)no-repeat center;
background-size: cover;
animation:fade2 30s infinite;
-webkit-animation:fade2 30s infinite;
}
.slide3 {
background: url(http://media.dunkedcdn.com/assets/prod/40946/580x0-9_cropped_1371564896_p17tbq6n86jdo3ishhta3fv1i3.jpg)no-repeat center;
background-size: cover;
animation:fade3 30s infinite;
-webkit-animation:fade3 30s infinite;
}
@keyframes fade {
0%,
27% {
opacity: 1
}
33.333% {
opacity: 0
}
66.666% {
opacity: 0
}
100% {
opacity: 1
}
}
@keyframes fade2 {
0% {
opacity: 0
}
33.333%,
60% {
opacity: 1
}
66.666% {
opacity: 0
}
100% {
opacity: 0
}
}
@keyframes fade3 {
0% {
opacity: 0
}
33.333% {
opacity: 0
}
66.666%,
93% {
opacity: 1
}
100% {
opacity: 0
}
}<div class='slider'>
<div class='slide1'></div>
<div class='slide2'></div>
<div class='slide3'></div>
</div>
Вы можете установить правила анимации на '' .slider *, использовать ту же выцветание анимацию, а затем использовать 'анимационного-delay' задержать анимация на 30 секунд. Подробнее о 'анимация-задержка' на этой [link] (https://developer.mozilla.org/fr/docs/Web/CSS/animation-delay). – Noctisdark