CSS 关键帧动画之间的延迟

假设您希望动画运行 1 秒，然后延迟 4 秒再运行。 看起来很简单。 事实并非如此，但可行。 您需要伪造它。

不

有一个 animation-delay 属性，但这对我们没有帮助。 这样会延迟动画的开始，但动画开始后就会连续运行。

解决方案：没有变化的关键帧

您需要进行一些心算

因此，当您调用关键帧动画时，您使用总秒数

.mover {
  animation: move 5s infinite;
}

但现在我们的 @keyframes 将运行 5 秒

@keyframes move {
  /* this will happen over 5 seconds */
}

因此，为了使我们的动画只运行 1 秒，您需要让更改在 1/5 的时间内发生，即 20%。 从语言上讲，看起来像这样

@keyframes move {
  0% {
    transform: translate(0, 0);
  }

  /* Finish changes by here */
  20% {
    transform: translate(200px, 0);
  }

  /* Between 20% and 100%, nothing changes */
  100% {
    transform: translate(200px, 0);
  }
}

我们可以使用更少的代码来编写，因为 0% 的值是假设的，您可以用逗号分隔关键帧步骤

@keyframes move {
  20%, 100% {
    transform: translate(200px, 0);
  }
}

您可以随意使用关键帧，您只需要记住在动画的最后一步和 100% 之间将所有内容设置成完全相同。

演示

查看 CodePen 上 Chris Coyier 的 关键帧与动画迭代之间的延迟。