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

CSS中没有处理这个问题的构造,你必须假装它。移除延迟,将动画的持续时间设置为11秒,然后调整关键帧百分比,使动画的最后90.9%不会发生任何事情,将剩余的9.1%时间除以动画的步骤。(小标题) animation-delay 属性仅设置初始延迟。)

source for this technique

动画延迟 拖延 开始 是动画的一部分。

最好的办法是“计算”,将动画的总持续时间设置为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);
  }
}