从中间开始 CSS 动画

假设您有一个 @keyframe 动画，它可以将元素动画到屏幕的另一侧。从左侧边缘到右侧边缘。您将其应用于多个元素。但您不希望所有元素都从完全相同的位置开始。

您可以更改animation-delay，以便它们在不同的时间开始，但它们仍然会从相同的位置开始。

幸运的是，有一种方法。

诀窍是使用负animation-delay。这将立即开始动画，但就像动画的一部分已经运行过一样。

例如，这里有三个元素

<div class="thing thing-1"></div>
<div class="thing thing-2"></div>
<div class="thing thing-3"></div>

它们宽 300px。我们将把它们动画到屏幕的另一侧

@keyframes moveAcross {
  0% {
    left: -300px;
  }
  100% {
    left: 100%;
  }
}

它们都使用此动画，这意味着它们都将从相同的位置开始

.thing {
  width: 300px;
  position: absolute;
  top: 0;
  left: 0;
  animation: moveAcross 10s linear infinite;
}

要更改它们在关键帧时间线上开始的不同位置，我们应用这些负延迟

.thing-1 {
  animation-delay: -1s;
}
.thing-2 {
  animation-delay: -2s;
}
.thing-3 {
  animation-delay: -3s;
}

另一个小技巧：要测试这些起始位置，只需停止动画（您基本上只会看到第一帧）

.car {
  ...
  animation-play-state: paused;
}

这在非常缓慢的动画中可能最有用，在这些动画中，直接延迟会导致什么都不显示或显示错误的内容太长时间。

为了好玩，不同的持续时间也是如此

查看 Chris Coyier 在 CodePen 上的 Pen hjbKp (@chriscoyier)。