三点加载器动画：透明度随动画同步变化实现求助

你的问题出在关键帧的透明度节点没有和拉伸动作的时序对齐，加上三个圆点的动画延迟没配合好，导致透明度变化和拉伸节奏脱节。以下是直接的解决方法：

核心调整方向 #

• 重构关键帧，让拉伸阶段强制保持100%不透明度，拉伸结束后随着下一个圆点启动拉伸，当前圆点逐步降低透明度，直到自己下次拉伸前恢复。
• 给三个圆点设置等差的动画延迟，让它们的动画错开1/3周期，形成连贯的顺序效果。

完整可复用代码 #

/* 基础加载器容器样式 */
.loader {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* 单个圆点样式 */
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #2563eb;
  animation: elasticDot 1.2s infinite ease-in-out;
}

/* 错开三个圆点的动画时机 */
.dot:nth-child(2) {
  animation-delay: 0.4s;
}
.dot:nth-child(3) {
  animation-delay: 0.8s;
}

/* 同步拉伸与透明度的关键帧 */
@keyframes elasticDot {
  0%, 25%, 100% {
    transform: scale(1, 1);
    opacity: 1;
  }
  12.5% {
    transform: scale(1, 1.6);
    opacity: 1;
  }
  50%, 75% {
    opacity: 0.4;
  }
}

关键帧逻辑说明 #

• 0%/25%/100%：初始状态、拉伸后恢复原大小、循环结束时，圆点保持原尺寸和完全不透明。
• 12.5%：到达拉伸峰值，此时透明度仍为100%，确保拉伸动作和视觉高亮同步。
• 50%/75%：在另外两个圆点依次拉伸的阶段，当前圆点维持低透明度，突出正在拉伸的圆点。

这样调整后，每个圆点的拉伸动作和透明度变化会完全同步，三个圆点形成流畅的弹性加载动画。

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