译者：桔梗

原文链接

当还没有像 **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;
 } 
复制代码