How can I speed up the slides in my CSS vertical slider? - html

Question

I need a slider which would move slides in a vertical direction. The issue with my code is that transition between slides are too slow. Each slide should stay at least 5 sec and transition between next slide should be very quick like we see at the slick slider and so.
#slideshow {
position: relative;
width: 200px;
height: 20px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow li {
left: 0px;
height:20px;
top: 0;
animation: slide 17s infinite;
}
#slideshow li:nth-child(2) {
animation-delay: 6.25s;
opacity: 0;
}
#slideshow li:nth-child(3) {
animation-delay: 11.5s;
opacity: 0;
}
#keyframes slide {
0% {
transform: translateY(10px);
opacity: 1;
}
25% {
transform: translateY(0px);
opacity: 1;
}
50% {
transform: translateY(-20px);
opacity: 1;
}
50.1%,
100% {
transform: translateY(20px);
opacity: 0;
}
}
<ul id="slideshow">
<li>slide1</li>
<li>slide2</li>
<li>slide3</li>
</ul>
JSFiddle

Answer 1

You need to adjust the values of
#slideshow li {
left: 0px;
height:20px;
top: 0;
animation: slide 3s infinite; /*adjust here*/
}
#slideshow li:nth-child(2) {
animation-delay: 1.25s; /*Adjust here*/
opacity: 0;
}
#slideshow li:nth-child(3) {
animation-delay: 1.5s;/*Adjust here*/
opacity: 0;
}
https://jsfiddle.net/Ljhdeb0c/6/

Answer 2

By changing percentage of animation keyframe I have done it. This is what I was looking for.
#slideshow {
position: relative;
width: 200px;
height: 20px;
border: 5px solid #fff;
overflow: hidden;
}
#slideshow li {
position: absolute;
left: 0px;
height:20px;
top: 0;
animation: slide 10s infinite;
}
#slideshow li:nth-child(2) {
animation-delay: 5s;
opacity: 0;
}
#keyframes slide {
0% {
transform: translateY(20px);
opacity: 1;
}
5%, 50%{
transform: translateY(0);
opacity: 1;
}
51% {
transform: translateY(-20px);
opacity: 0;
}
51.1%,
100% {
transform: translateY(20px);
opacity: 0;
}
}
<ul id="slideshow">
<li>slide1</li>
<li>slide2</li>
</ul>
fiddle