Question

我制作了一个简单的自动图像滑块动画，但第一张和最后一张图像需要更长的时间，而中间的图像则相当快。

我如何平衡时间并暂停每个图像，假设 6 秒然后继续。我试过 animation-play-state:paused;，但不知道如何添加时间。

这是我的一些代码：

    .image-container {
      -webkit-animation-name: autoplay;
      animation-name: autoplay;
      -webkit-animation-duration: 20s;
      animation-duration: 20s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }

     @-webkit-keyframes 
  autoplay {  
    0% {
   left: 0px;
  }
  
    25% {
   left: -1920px;
  }
    
    50% {
   left: -3840px;
  }
  
    100% {
   left: -5760px;
  }
}

@keyframes 
autoplay {  
  0% {
 left: 0px;
}

  25% {
 left: -1920px;
}
  
  50% {
 left: -3840px;
}

  100% {
 left: -5760px;
}
}

Answer 1

通过使用 Louys Patrice Bessette 建议的关键帧来解决：

暂停 CSS 动画 n 秒

1 个答案: