小技巧/ 动画周期性延迟

译者：桔梗

原文链接

当还没有像**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);
  }
 } 

示例 codepen.io/estelle/pen….

我们已经将该动画调用了3次，每一次都定义了不同的延迟。在示例中，每一次动画结束都在下一次动画开始之前。假设动画周期产生了重叠，虽然动画会同时进行，但效果会显示为最后声明的动画。

示例 codepen.io/estelle/pen…

当然，你也可以用Javascript的animationstart, animationiteration 以及 animationend事件监听器，通过添加或移除元素上的动画名或类名来实现.