每一步的css3动画延迟

Question

我想用 css3 制作一个 slider ，我不需要任何按钮。只是一个无限动画，可以滑动 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;}
}

我该怎么做？

Answer 1

使用 css 属性 animation-delay(-webkit-animation-delay 或 -moz-animation-delay)。复制动画并将这些延迟设置为 30 秒、60 秒、90 秒等