如何加快我的CSS垂直滑块中的幻灯片？

Question

我需要一个可以在垂直方向移动幻灯片的滑块。我的代码问题是幻灯片之间的转换太慢。每张幻灯片应至少保持5秒，下一张幻灯片之间的过渡应该非常快，就像我们在光滑滑块等中看到的那样。

#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

您需要调整的

#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

值通过动画关键帧我的百分比变化已经做到了。这是我正在寻找的。

#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