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

我有几个动画（条），我想延迟执行，以便在它们之间交替。第一个1，当它完成另一个等。。。但我只能延迟动画的第一次迭代。之后，它会立即触发

@-webkit关键帧宽度{
0% {
宽度：0px；
}
100% {
宽度：600px；
}
}
div{
宽度：0px；
高度：40px；
左侧填充：0px；
利润率：10px0；
颜色：白色；
字体：18px格鲁吉亚；
线高：40px；
垂直对齐：中间对齐；
背景：#05f；
-webkit动画：宽度15s无限；
-moz动画：宽度15s无限大；
-o-动画：宽度15s无限大；
}
#第一组{
背景色：#008000；
-webkit动画计时功能：线性；
-webkit动画持续时间：6s；
-webkit动画延迟：3s；
-webkit动画迭代次数：8次；
}
#第二组{
背景色：#ff0000；
-webkit动画计时功能：线性；
-webkit动画持续时间：4s；
-webkit动画延迟：9秒；
-webkit动画迭代次数：8次；
}
#第一组{
-webkit动画计时功能：线性；
-webkit动画持续时间：6s；
-webkit动画延迟：3s；
-webkit动画迭代次数：8次；
}
#第二组{
-webkit动画计时功能：线性；
-webkit动画持续时间：4s；
-webkit动画延迟：9秒；
-webkit动画迭代次数：8次；
}

1行
二线

要连续运行三个动画，我建议创建一个将运行总时间长度的三分之一的动画，然后，为每个动画添加三个不同的

-webkit animation delay

。请参见下面的示例：

@-webkit关键帧宽度{
0% {
宽度：0px；
}
33.33% {
宽度：600px；
}
100% {
宽度：600px；
}
}
div{
宽度：0px；
高度：40px；
左侧填充：0px；
利润率：10px0；
颜色：白色；
字体：18px格鲁吉亚；
线高：40px；
垂直对齐：中间对齐；
-webkit动画：宽度15秒8；
-moz动画：宽度15s8；
-o动画：宽度15s8；
-webkit动画计时功能：线性；
}
#第一组{
背景色：#008000；
}
#第二组{
背景色：#ff0000；
-webkit动画延迟：5s；
}
#第三组{
背景色：#0055ff；
-webkit动画延迟：10秒；
}

1行
二线
第三行

延迟和动画的总和不会一个接一个地出现。您可能还需要添加

动画迭代计数：1（除非重复动画是计划的一部分）。