如何在每次迭代中延迟播放CSS？

Question

我有几个动画（条形图），我想延迟执行以便在它们之间切换。首先是第一个，当另一个结束时，依次类推...等等，但是我只能延迟动画的第一次迭代。之后，它立即触发！

@-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

要连续运行三个动画，我建议创建一个动画，该动画将运行总时间的三分之一，然后为每个动画放置三个不同的-webkit-animation-delay。请参见下面的示例：

@-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>