Question

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

说你有这个例子：

＆＃13;

.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); }
}

＆＃13;

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

＆＃13;

demo

Answer 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); }
}

<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>

关键帧迭代之间的延迟

1 个答案: