我如何加快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>

小提琴