关键帧之间的延迟 [英] keyframes delay between iterations

问题描述

是否有办法使动画延迟不仅在开始时发生，而且在迭代之间发生?

Is there a way to make the animation-delay happen not only at the begining but also between iterations?

假设您有此示例:

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

演示

推荐答案

不幸的是，没有属性可以指定无限关键帧动画中各次迭代之间的延迟. animation-delay 仅指定第一次播放动画之前的时间.

Unfortunatly there is no property to specify delay between iterations in infinite keyframe animations. The animation-delay only specifies the time before the animation is fired the first time.

但是

您可以通过修改关键帧动画并将关键帧动画本身包括静态"时间来实现迭代之间的延迟.

You may achieve a delay between iterations by modifying the keyframe animation and including the "static" time in the keyframe animation itself.

这里是一个示例:div静止不动2秒钟，并在1秒的时间内来回旋转90°.动画是无限的，每次动画迭代都由2秒的暂停间隔开.

Here is an example : the div stays still for 2 seconds and rotates 90° back and forth in a 1 second timespan. The animation is infinite and each animation iteration is seprated by the 2 second pause.

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>

请注意，您需要添加关键帧动画的百分比值以适合您的需要(动画持续时间和暂停时间)和动画持续时间.

Note that you will need to addapt the percent values of the keyframe animation to fit your needs (animation duration and pause) and the animation duration.

以下是相同的示例示例，其中有1秒的动画和两次迭代之间的1秒的暂停:

Here is the same example example with a 1 second animation and a 1 second pause between iterations :

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>

这篇关于关键帧之间的延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！