译者：桔梗
当还没有像**animation-iteration-delay**这样的属性时，可以使用animation-delay属性来实现动画效果的延迟，或者用Javascript来“伪造”该效果。最好的“伪造”方法取决于动画效果重复的次数，性能，以及每一次重复时延迟时间是否相同。
什么是动画周期性延迟呢？有时我们需要让一个动画播放多次，并且每一次动画播放周期之间都能够等待一定的时间，这就是动画周期性延迟。
比如要让某一元素改变3次，但又想在动画每次重复播放之前能够等待4s(动画执行时间为1s).你可以在关键帧定义中添加添加延迟帧，并将动画触发次数定为3次:
.animate3times {
background-color: red;
animation: yellow;
animation-iteration-count: 3;
animation-duration: 5s;
}
@keyframes yellow {
80% {
transform: scale(1);
background-color:red;
}
80.1% {
background-color: green;
transform: scale(0.5);
}
100% {
background-color: yellow;
transform: scale(1.5);
}
}
注意，第一个关键帧选择器位于80%标记处，并且与默认样式相同，这将使你的元素变化三次，其中处于默认样式的占据了整个动画时间（5s）的80%,或者说4s，接着在动画剩下的1s中，元素背景色从green变化到yellow，尺寸从小变大。如此重复执行3次后结束。
该方法也适用于无限重复的动画，但是，该方法只适合每一次动画之前的延迟时间完全相同的场景。如果想改变每一次动画之前的延迟时间，且保持原来的尺寸和颜色变化的时长，你还得重新定义一个@keyframes.
为了实现不同的动画周期性延迟，可以创建一个单独的动画，实现三种不同的延迟时长。
.animate3times {
background-color: red;
animation: yellow;
animation-iteration-count: 1;
animation-duration: 15s;
}
@keyframes yellow {
0%, 13.32%, 20.01%, 40%, 46.67%, 93.32% {
transform: scale(1);
background-color:red;
}
13.33%, 40.01%, 93.33% {
background-color: green;
transform: scale(0.5);
}
20%, 46.66%, 100% {
background-color: yellow;
transform: scale(1.5);
}
}
该方法在编码与维护方面更加困难，只适用于单个动画周期。假如要改变动画的数量或者每一次重复延迟时间，还需要声明新的关键帧。
实现动画周期性延迟的小技巧
针对上述问题，目前有一个切实可行的解决办法。该方法没有被动画规范正式允许，但是也没有被禁止使用，而且浏览器也能够支持：你可以多次声明一种动画，每个动画声明都有一个不同的延迟时间
.animate3times {
animation: **yellow, yellow, yellow**;
animation-delay: 0, 4s, 10s;
animation-duration: 1s;
}
@keyframes yellow {
0% {
background-color: green;
transform: scale(0.5);
}
100% {
background-color: yellow;
transform: scale(1.5);
}
}
我们已经将该动画调用了3次，每一次都定义了不同的延迟。在示例中，每一次动画结束都在下一次动画开始之前。假设动画周期产生了重叠，虽然动画会同时进行，但效果会显示为最后声明的动画。
当然，你也可以用Javascript的animationstart, animationiteration 以及 animationend事件监听器，通过添加或移除元素上的动画名或类名来实现.