CSS预加载器：如何让伪元素动画晚于父元素启动？

嘿，这个问题我之前做预加载动画时也踩过坑！核心问题确实是伪元素直接继承了父元素的完整animation声明，虽然理论上单独加animation-delay应该能生效，但可能因为继承的优先级或者浏览器渲染的小细节，导致你的延迟设置没起作用。不过完全可以只用一个<div>标签实现你要的错落缩放效果，不用额外元素，我给你调整了代码，完美解决需求：

解决方案代码 #

<div class="preloader"></div>

.preloader {
  width: 10px;
  height: 10px;
  background: red;
  border-radius: 50%;
  position: relative;
  margin: 20px;
  /* 父元素的基础缩放动画 */
  animation: resize 2s linear infinite;
}

.preloader::before,
.preloader::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: red;
  border-radius: inherit;
  /* 初始状态缩小，实现"两侧圆点小于中间"的初始效果 */
  transform: scale(0.8);
  /* 单独声明动画，复用父元素的resize关键帧，同时设置延迟 */
  animation: resize 2s linear infinite;
}

.preloader::before {
  left: -15px;
  /* 左侧圆点延迟0.3秒启动动画 */
  animation-delay: 0.3s;
}

.preloader::after {
  left: 15px;
  /* 右侧圆点延迟0.6秒启动动画，形成错落节奏 */
  animation-delay: 0.6s;
}

@keyframes resize {
  50% {
    transform: scale(1.2);
  }
}

关键改动说明 #

1. 给伪元素单独声明animation：
   不再依赖父元素的动画继承，而是主动复用resize关键帧，这样animation-delay就能正常生效，不会被继承的属性覆盖。
2. 设置初始缩放状态：
   通过transform: scale(0.8)让伪元素初始尺寸比父元素小，完美实现你要的"初始时两侧圆点小于中间"的视觉效果。
3. 错落的延迟时间：
   给左右伪元素设置不同的animation-delay，让三个圆点的缩放动作形成节奏差，看起来更有动感。

你可以根据需求调整延迟时间（比如改成0.2s/0.4s）或者缩放比例（比如把1.2改成1.5），适配不同的设计风格~

内容的提问来源于stack exchange，提问作者cipherdragon