How to play css with delay on each iteration? - html

Question

I have a couple of animations (bars) I want to delay execution so as to alternate between them. First 1, when it finishes the other and so on... but I have been able only to delay the first iteration of the animation. After that it triggers with no delay!
#-webkit-keyframes width {
0% {
width: 0px;
}
100% {
width: 600px;
}
}
div {
width: 0px;
height: 40px;
padding-left: 0px;
margin: 10px 0;
color: white;
font: 18px Georgia;
line-height: 40px;
vertical-align: middle;
background: #05f;
-webkit-animation: width 15s infinite;
-moz-animation: width 15s infinite;
-o-animation: width 15s infinite;
}
#div1 {
background-color: #008000;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 6s;
-webkit-animation-delay: 3s;
-webkit-animation-iteration-count: 8;
}
#div2 {
background-color:#ff0000;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 9s;
-webkit-animation-iteration-count: 8;
}
#div1 {
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 6s;
-webkit-animation-delay: 3s;
-webkit-animation-iteration-count: 8;
}
#div2 {
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 4s;
-webkit-animation-delay: 9s;
-webkit-animation-iteration-count: 8;
}
<div id="div1">1st line</div>
<div id="div2">2nd line</div>
<div id="p_bar" class="p_bar"></div>

Answer 1

To run three animations consecutively, I would suggest to create one animation that will run one third of the total time length and then, you put three different -webkit-animation-delay for every of them. Please see below the example:
#-webkit-keyframes width {
0% {
width: 0px;
}
33.33% {
width: 600px;
}
100% {
width: 600px;
}
}
div {
width: 0px;
height: 40px;
padding-left: 0px;
margin: 10px 0;
color: white;
font: 18px Georgia;
line-height: 40px;
vertical-align: middle;
-webkit-animation: width 15s 8;
-moz-animation: width 15s 8;
-o-animation: width 15s 8;
-webkit-animation-timing-function: linear;
}
#div1 {
background-color: #008000;
}
#div2 {
background-color:#ff0000;
-webkit-animation-delay: 5s;
}
#div3 {
background-color:#0055ff;
-webkit-animation-delay: 10s;
}
<div id="div1">1st line</div>
<div id="div2">2nd line</div>
<div id="div3">3rd line</div>