迭代之间的关键帧延迟答案

【问题标题】：keyframes delay between iterations迭代之间的关键帧延迟
【发布时间】：2015-05-25 16:20:58
【问题描述】：

有没有办法让动画延迟不仅在开始时发生，而且在迭代之间发生？

假设你有这个例子：

.lv1 {
  width: 200px;
  height: 200px;
  background: red;
  animation: flu 1s infinite;
  animation-delay: 2s;
}
.lv2 {
  background: orange;
}
.lv3 {
  background: yellow;
}
.lv2, .lv3 {
  width: 70%;
  height: 70%;
  animation: inherit;
}
@keyframes flu {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(90deg); }
}

<div class="lv1">
  <div class="lv2">
    <div class="lv3"></div>
  </div>
</div>

demo

【问题讨论】：

标签： css css-animations

【解决方案1】：

很遗憾，在无限关键帧动画中没有指定迭代之间延迟的属性。 animation-delay 仅指定动画第一次触发之前的时间。

但是

您可以通过修改关键帧动画并在关键帧动画本身中包含“静态”时间来实现迭代之间的延迟。

这是一个示例：div 保持静止 2 秒，并在 1 秒的时间跨度内来回旋转 90°。动画是无限的，每次动画迭代都以 2 秒的暂停分隔。

div {
  width: 200px; height: 200px;
  background: red;
  -webkit-animation: flu 3s infinite;
  animation: flu 3s infinite;
}
@keyframes flu {
  66%, 100% { transform: rotate(0deg); }
  83%       { transform: rotate(90deg); }
}
@-webkit-keyframes flu {
  66%, 100% { transform: rotate(0deg); }
  83%       { transform: rotate(90deg); }
}

&lt;div&gt;&lt;/div&gt;

请注意，您需要添加关键帧动画的百分比值以满足您的需要（动画持续时间和暂停）和动画持续时间。

下面是相同的示例示例，其中包含 1 秒动画和 1 秒迭代之间的暂停：

div {
  width: 200px; height: 200px;
  background: red;
  -webkit-animation: flu 2s infinite; /* <-- changed to 2s (1 second animation and 1 second pause) */
  animation: flu 2s infinite; /* <-- changed to 2s (1 second animation and 1 second pause)  */
}
@keyframes flu {
  50%, 100% { transform: rotate(0deg); }  /* changed 66% to 50% */
  75%       { transform: rotate(90deg); } /* changed 83% to 75% */
}
@-webkit-keyframes flu {
  50%, 100% { transform: rotate(0deg); }  /* changed 66% to 50% */
  75%       { transform: rotate(90deg); } /* changed 83% to 75% */
}

&lt;div&gt;&lt;/div&gt;

【讨论】：