迭代之间的CSS动画延迟[重复]答案

【问题标题】：CSS animation delay between iterations [duplicate]迭代之间的CSS动画延迟[重复]
【发布时间】：2018-11-14 03:50:54
【问题描述】：

我有这种动画：

.wiggle-animation {
  animation: 1s wiggle-animation ease infinite;
  animation-delay: 10s;
}

@keyframes wiggle-animation {
  0% {
    transform: rotate(-3deg);
    box-shadow: 0 2px 2px #000;
  }
  20% {
    transform: rotate(20deg);
  }
  40% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(5deg);
  }
  90% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0);
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
  }
}

我希望这个动画每 10 秒触发一次。我试过 animation-delay 但它不起作用。你能告诉我我做错了什么吗？

【问题讨论】：

@RogatnevNikita 你知道你链接了同一个问题吗？

标签： css animation rotation transform delay

【解决方案1】：

CSS 中没有任何结构可以处理这个问题，你不得不假装它。移除延迟，将动画的持续时间设置为 11 秒，然后调整关键帧百分比，以便动画的最后 90.9% 没有任何反应，将剩余 9.1% 的时间用于动画步骤。（animation-delay 属性仅设置初始延迟。）

source for this technique

【讨论】：

【解决方案2】：

animation-delay 延迟动画的开始。

最好的办法是“算算”并将动画的总持续时间设置为 10 秒，并让动画在剩余的 9 秒内保持静止：

.wiggle-animation {
  animation: 10s wiggle-animation ease infinite;
}

@keyframes wiggle-animation {
  0% {
    transform: rotate(-3deg);
    box-shadow: 0 2px 2px #000;
  }
  2% {
    transform: rotate(20deg);
  }
  4% {
    transform: rotate(-15deg);
  }
  6% {
    transform: rotate(5deg);
  }
  9% {
    transform: rotate(-1deg);
  }
  10% {
    transform: rotate(0);
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
  }
  100% {
    transform: rotate(0);
    box-shadow: 0 2px 2px rgba(0,0,0,.2);
  }
}

【讨论】：