В общем делема такая: 1. Есть контейнер со слайдами. 2. В контейнере есть слайды 5 штук. 3. Это всё приправлено свойствами overflow:hidden и height: 500%. 4. Прокручивается вверх.
Как сделать чисто Fade эффект. Чтобы например, первый слайд исчезал, проходил небольшой промежуток времени и появлялся следующий по счёту слайд?
CSS:
.slider {
overflow: hidden;
height: 100%;
width: 100%;
}
.scontainer {
position: relative;
height: 500%;
width: 100%;
animation-name: slideranim;
animation-duration: 30s;
animation-delay: initial;
animation-iteration-count: infinite;
padding: 0;
margin: 0;
}
.slides {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.sslides {
position: absolute;
height: 300px;
width: 1100px;
left: -20px;
right: 0px;
margin-left: auto;
margin-right: auto;
background: red;
}
.hoverblock {
position: absolute;
z-index: 10;
width: 100%;
height: 100%;
}
@keyframes slideranim {
0% {z-index: 10;}
10% {top: 0%;z-index: 10;}
11% {z-index: 0;}
19% {z-index: 0;}
20% {top: -100%;z-index: 10;}
30% {top: -100%;z-index: 10;}
31% {z-index: 0;}
39% {z-index: 0;}
40% {top: -200%;z-index: 10;}
50% {top: -200%;z-index: 10;}
51% {z-index: 0;}
59% {z-index: 0;}
60% {top: -300%;z-index: 10;}
70% {top: -300%;z-index: 10;}
71% {z-index: 0;}
79% {z-index: 0;}
80% {top: -400%;z-index: 10;}
90% {top: -400%;z-index: 10;}
91% {z-index: 0;}
99% {z-index: 0;}
100% {top: 0%;z-index: 10;}
}
Html:
<div class="slider">
<div class="hoverblock"></div>
<div class="scontainer">
<div class="slides">
<div class="sslides sslide1">
text
</div>
</div>
<div class="slides">
<div class="sslides sslide1">
text2
</div>
</div>
<div class="slides">
<div class="sslides sslide1">
text3
</div>
</div>
<div class="slides">
<div class="sslides sslide1">
text4
</div>
</div>
<div class="slides">
<div class="sslides sslide1">
text5
</div>
</div>
</div>
</div>