html - 如何在每次迭代时延迟播放 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>