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

本文深入探讨了css加载动画中伪元素`animation-delay`与`animation-play-state: paused`结合使用时可能遇到的启动不同步问题。通过分析动画延迟机制，文章揭示了伪元素在鼠标悬停时未能立即按预期错开启动的原因，并提供了一种通过调整`animation-delay`属性来确保动画从一开始就呈现出即时、错位效果的解决方案，同时分享了chrome开发者工具的动画调试技巧。

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

在CSS动画中，animation-delay属性用于指定动画在开始执行前的等待时间。而animation-play-state属性则控制动画的播放状态，可以是running（运行）或paused（暂停）。当一个动画被设置为paused时，它会停留在其当前状态，直到被设置为running。

关键在于，animation-delay定义的延迟是动画开始其第一个迭代前的等待时间。如果动画一开始就被paused，那么当它被设置为running时，浏览器会检查是否已经过了animation-delay所指定的时间。如果已经过了，动画会立即从其0%状态开始；如果还没有过，动画会在被设置为running后继续等待剩余的延迟时间，然后才开始其第一个迭代。

在多层动画（如使用伪元素::before和::after创建的加载旋转效果）中，如果每个动画都设置了不同的animation-delay，并且所有动画都从paused状态切换到running，那么它们的启动时机就会受到这个机制的影响。

问题分析：动画为何未能按预期启动

考虑一个典型的CSS加载旋转动画，其中包含一个主元素和两个伪元素，它们分别代表不同的旋转层。我们希望这些层在鼠标悬停时以不同的时间错开启动，形成一个流畅的动态效果。初始代码可能如下所示：

立即学习“前端免费学习笔记（深入）”；

.spin div {
  /* ... 其他样式 ... */
  animation-name: spinning;
  animation-duration: 1s;
  animation-play-state: paused; /* 初始暂停 */
  /* ... */
}

.spin div::before {
  /* ... 其他样式 ... */
  animation-name: spinning;
  animation-duration: 2s;
  animation-delay: 1s; /* 延迟1秒 */
  animation-play-state: paused; /* 初始暂停 */
  /* ... */
}

.spin div::after {
  /* ... 其他样式 ... */
  animation-name: spinning;
  animation-duration: 2s;
  animation-delay: 2s; /* 延迟2秒 */
  animation-play-state: paused; /* 初始暂停 */
  /* ... */
}

.spin div:hover,
.spin div:hover::before,
.spin div:hover::after {
  animation-play-state: running; /* 悬停时运行 */
}

当鼠标悬停在.spin div上时，所有的animation-play-state都会从paused变为running。

• 主元素.spin div没有animation-delay，因此它会立即开始旋转。
• 伪元素::before设置了animation-delay: 1s。这意味着在它被设置为running后，它会等待1秒，然后才开始其第一次旋转。
• 伪元素::after设置了animation-delay: 2s。它会在被设置为running后等待2秒，然后才开始其第一次旋转。

这种行为导致的结果是，主元素可能已经完成了一次或多次旋转，而伪元素才开始其动画，或者它们之间未能从动画开始的第一刻起就呈现出预期的错位效果，而是等待一段时间后才开始各自的延迟。用户观察到的现象是，动画似乎先完成了一次“同步”的旋转，然后才出现延迟效果，这与“从一开始就错开”的预期不符。

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

为了实现从鼠标悬停那一刻起就立即呈现出错位启动的效果，我们需要调整animation-delay的设置。核心思路是确保至少有一个伪元素与主动画同时启动，而其他伪元素则保持其延迟。

Endel.io

Endel是一款可以创造个性化舒缓声音的应用程序，可帮助您集中注意力、放松身心和入睡。

下载

根据问题描述和提供的解决方案，最直接有效的方法是取消第一个伪元素的animation-delay，使其与主元素同步启动。这样，第二个伪元素依然会保持其延迟，从而在视觉上形成即时的错位效果。

示例代码

.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 */
  /* 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::before上的animation-delay: 1s，现在当鼠标悬停时：

1. .spin div（主元素）立即启动动画。
2. .spin div::before（第一个伪元素）也立即启动动画，因为它现在没有了延迟。
3. .spin div::after（第二个伪元素）在被设置为running后，仍然会等待2秒才开始其动画。

这样，主元素和第一个伪元素会同步开始，而第二个伪元素会在2秒后加入旋转，从而在视觉上实现了从悬停那一刻起就立即呈现出不同步的、有层次感的动画效果，而不是先同步旋转一圈再出现延迟。

调试技巧：Chrome DevTools 动画抽屉

在开发和调试CSS动画时，浏览器开发者工具是不可或缺的利器。Chrome DevTools提供了一个强大的“Animations”（动画）抽屉，可以帮助我们直观地检查和理解动画的行为。

如何使用动画抽屉：

1. 打开开发者工具: 在Chrome浏览器中，右键点击页面元素，选择“检查”或按下F12键。
2. 切换到“Animations”抽屉: 在开发者工具的底部面板中，点击“更多工具”（通常是一个三个点的图标），然后选择“Animations”。
3. 录制动画: 当动画抽屉打开时，它会自动开始录制页面上发生的动画。触发你的CSS动画（例如，悬停在元素上）。
4. 分析动画时间线: 录制完成后，动画抽屉会显示一个时间线，展示所有检测到的动画。你可以：
   • 暂停/播放: 控制动画的播放。
   • 调整播放速度: 减慢动画播放速度，以便仔细观察细节。
   • 检查动画属性: 点击时间线上的动画条目，可以在右侧面板查看其详细的CSS属性，包括animation-delay、animation-duration、animation-timing-function等。
   • 拖动时间轴: 手动拖动时间轴，精确地定位到动画的任何一个时刻，观察元素的状态。

通过动画抽屉，你可以清楚地看到每个动画的实际启动时间、持续时间以及它们之间的叠加关系，这对于诊断像本教程中描述的延迟启动问题非常有帮助。

总结与注意事项

解决CSS动画中伪元素animation-delay与animation-play-state: paused结合使用时的启动不同步问题，关键在于理解animation-delay的实际作用机制。它定义的是动画首次迭代前的等待时间，而非动画开始时的偏移量。当动画从暂停状态切换到运行状态时，如果希望立即呈现出错位效果，通常需要调整animation-delay的设置，确保首批动画能够即时启动。

• 明确动画意图: 在设计动画时，首先要明确每个动画层希望何时启动、持续多久。
• 测试不同延迟组合: 对于复杂的动画，尝试不同的animation-delay组合，观察其效果。
• 利用开发者工具: 熟练使用Chrome DevTools的动画抽屉，能够极大提高调试效率，帮助你直观地理解动画行为。

通过上述调整和调试技巧，你可以更好地控制CSS动画的启动时机，创建出更符合预期的、流畅且富有表现力的用户界面效果。