迭代之间的关键帧延迟

Question

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

假设你有这个例子：

.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

Answer 1

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

但是

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

举个例子：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); }
}

<div></div>

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

这是相同的示例，其中包含 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% */
}

<div></div>

迭代之间的关键帧延迟

keyframes delay between iterations

css

css-animations