keyframes delay between iterations

问题

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

Say you have this example:

.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

回答1:

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.

But

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

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.

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>

来源：https://stackoverflow.com/questions/30442315/keyframes-delay-between-iterations

标签

css

css-animations