优化CSS纯加载动画：解决伪元素延迟启动的同步问题

本教程探讨了css加载动画中，伪元素使用`animation-delay`在交互（如hover）时未能立即同步启动的问题。通过分析`animation-delay`与`animation-play-state`的交互机制，我们发现移除部分伪元素的初始延迟可以实现动画在触发瞬间即刻错位启动，从而达到更流畅、符合预期的视觉效果。文章将提供详细代码示例和调试建议。

理解CSS动画延迟与播放状态

在CSS动画中，animation-delay属性用于指定动画在启动前等待的时间。而animation-play-state属性则控制动画的播放状态，可以是running（播放）或paused（暂停）。当一个动画被设置为paused，并在某个事件（例如hover）触发时切换为running，animation-delay的行为可能会导致一些预期之外的效果。

具体来说，如果一个元素或其伪元素设置了animation-delay，即使动画的animation-play-state从paused变为running，这个延迟依然会生效。这意味着动画会先等待animation-delay指定的时间，然后才开始其第一次迭代。对于多层叠加的加载动画，如果希望它们在触发瞬间就以不同的节奏（即错位）开始旋转，那么简单地为所有层设置animation-delay可能并不能达到预期效果。

问题分析：伪元素动画的首次延迟

考虑一个典型的纯CSS加载动画，它由一个主元素及其::before和::after伪元素构成，每个元素都执行一个旋转动画，并希望它们以不同的时间错开。

原始CSS代码示例：

.spin {
  margin: auto;
  margin-top: 23px;
  margin-bottom: 23px;
}

.spin div {
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 50%;
  border: 3px solid #2196f3;
  border-bottom-color: transparent;
  position: relative;
  animation-name: spinning;
  animation-duration: 1s;
  animation-play-state: paused;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin div::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid orange;
  border-bottom-color: transparent;
  scale: 1.2;
  animation-name: spinning;
  animation-duration: 2s;
  animation-delay: 1s; /* 注意此处的延迟 */
  animation-iteration-count: infinite;
  animation-play-state: paused;
  animation-timing-function: linear;
}

.spin div::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid black;
  border-bottom-color: transparent;
  scale: 1.4;
  animation-name: spinning;
  animation-duration: 2s;
  animation-delay: 2s; /* 注意此处的延迟 */
  animation-play-state: paused;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin div:hover {
  animation-play-state: running;
}

.spin div:hover::before {
  animation-play-state: running;
}

.spin div:hover::after {
  animation-play-state: running;
}

@keyframes spinning {
  100% {
    transform: rotate(1turn)
  }
}

在这个代码中，当鼠标悬停在.spin div上时，所有动画的animation-play-state都从paused变为running。

• 主div的动画（持续1秒）会立即开始。
• ::before伪元素的动画（持续2秒，延迟1秒）会在主div动画开始1秒后才启动。这意味着在::before动画启动之前，主div已经完成了一次完整的旋转。
• ::after伪元素的动画（持续2秒，延迟2秒）会在主div动画开始2秒后才启动。

这种行为导致::before和::after动画没有在鼠标悬停的瞬间就以预期的错位效果启动，而是先等待了一段时间。

解决方案：调整动画延迟策略

要实现动画在触发瞬间即刻错位启动，我们需要重新审视animation-delay的使用。如果目标是让某些层立即启动，但与主层有不同的持续时间，从而自然形成错位，那么这些层就不应该有animation-delay。而对于需要显著滞后启动的层，则可以保留animation-delay。

针对上述问题，关键在于移除::before伪元素的animation-delay，使其与主div同时开始播放。由于它们的animation-duration不同（div为1s，::before为2s），它们会立即以不同的速度旋转，从而实现视觉上的错位。::after伪元素可以保留其animation-delay以实现更长的启动延迟。

修正后的CSS代码：

.spin {
  margin: auto;
  margin-top: 23px;
  margin-bottom: 23px;
}

.spin div {
  width: 50px;
  height: 50px;
  margin: auto;
  border-radius: 50%;
  border: 3px solid #2196f3;
  border-bottom-color: transparent;
  position: relative;
  animation-name: spinning;
  animation-duration: 1s;
  animation-play-state: paused;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.spin div::before {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid orange;
  border-bottom-color: transparent;
  scale: 1.2;
  animation-name: spinning;
  animation-duration: 2s;
  /* animation-delay: 1s; */