Question

我有这种动画：

.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 ，但是它不起作用。你能告诉我我在做什么错吗？

Answer 1

CSS中没有可用于处理此问题的构造，您必须伪造它。消除延迟，将动画的持续时间设置为11s，然后调整关键帧百分比，以使动画的最后90.9％不发生任何事情，将剩余的9.1％的时间除以动画的步骤。（animation-delay属性仅设置初始延迟。）

source for this technique

Answer 2

动画延迟会延迟动画的开始。

您最好的选择是“算术”，然后将动画的总持续时间设置为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);
  }
}

两次迭代之间的CSS动画延迟

2 个答案: