如何加速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

通过更改动画关键帧的百分比，我已经完成了它。这就是我想要的。

＆＃13;

＆＃13;

#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;
  }
}

＆＃13;

<ul id="slideshow">
  <li>slide1</li>
  <li>slide2</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

fiddle