css3 animation delay at each step - css

Question

i would like to make a slider with css3, I dont want any buttons for it. just an infinite animation that slides 5 individual images, the problem is i want something like this:
load in the page, wait 30sec then show 2nd wait 30sec then show 3rd wait 30sec then show 4th wait 30 sec then show 5th wait 30 sec then show first
#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;}
}
how can i do that?

Answer 1

use the css property animation-delay (-webkit-animation-delay or -moz-animation-delay). Duplicate the animation and set these delays to 30s, 60s, 90s etc

Answer 2

I have done this another way myself here is my example:
-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); }
}
The 3s in the first line will delay it by 3 seconds before it starts after the page loads.

Answer 3

To make the initial delay you add 30s after the 10s, that sets the initial delay.
To set up the recurring delays, you can use the setInterval function in javascript to change the animation state every time interval you want.
You can use this code as a springboard for the 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 */
With javascript, this function should do the trick:
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);
This code is for the unprefixed animation play state, to added the prefixed versions, just add: WebkitAnimationPlayState or MozAnimationPlayState or OAnimationPlayState.