css3每个步骤的动画延迟

我想用css3制作一个滑块，我不想要任何按钮。只是一个无限的动画，幻灯片5个单独的图像，问题是我想要这样的东西：

加载页面，等待30秒，然后显示第二次等待30秒，然后显示第三次等待30秒，然后显示第四次等待30秒，然后显示第五次等待30秒，然后显示第一次

#overflow #banner {
    height: 350px;
    width: 500%;
    background: #fff;
    -webkit-animation:slide-animation 10s infinite;
}

@-webkit-keyframes slide-animation { 
    0% {margin-left: 0;}
    20% {margin-left:-100%;}
    40% {margin-left:-200%;}
    60% {margin-left:-300%;}
    80% {margin-left:-400%;}
    100% {margin-left:0;}
}

---

我该怎么做？

使用css属性

动画延迟

（

-webkit动画延迟

或

-moz动画延迟

）。复制动画，并将这些延迟设置为30秒、60秒、90秒等

我自己也用另一种方式完成了这项工作，以下是我的示例：

-webkit-animation: baloon 10s ease-in-out 3s infinite normal;

@-webkit-keyframes baloon { 
0% { -webkit-transform: translate(0px, 0px); } 
50% { -webkit-transform: translate(50px, 75px); } 
100% { -webkit-transform: translate(0px, 0px); } 
}

---

第一行中的3将在页面加载后开始之前延迟3秒。

要进行初始延迟，请在10秒后添加30秒，以设置初始延迟

要设置重复性延迟，可以使用javascript中的setInterval函数在需要的时间间隔内更改动画状态

您可以将此代码用作css的跳板：

animation-play-state: paused;
-moz-animation-play-state: paused; /* Firefox*/
-webkit-animation-play-state: running; /* Safari and Chrome */
-o-animation-play-state: running; /* Opera */

使用javascript时，此函数应实现以下功能：

function changeAnimState() {
    x = 0;
    var banner = document.getElementById("banner");
    if (x%2 == 0) {banner.style.animationPlayState="running";}
    else {banner.style.animationPlayState="paused";};
    x+ = x;
)

window.onload = setInterval(changeAnimState(), 30000);

---

此代码用于未固定的动画播放状态，要添加前缀版本，只需添加：WebkitAnimationPlayState或MozAnimationPlayState或OAnimationPlayState。

如果您想让我成为一个基础JSFIDLE，我可以为您实现此代码，我很乐意这样做。如果他有20幅图像要在其中传播，该怎么办，在为扩展腾出空间方面，你的方法不是很好。从你所写的来看，似乎只考虑了最初的延迟，但我可能是错的，因为我不确定阿提拉到底想要什么。