CSS动画疑问：设置延迟后三个下落圆点仍同时出现，遗漏了什么？

咱先来揪出问题的核心：你把fall动画直接绑在了父容器.ellipsis上，但动画延迟却是设置在子<span>元素上的——这些span根本没绑定fall动画啊！所以延迟属性完全没地方生效，所有圆点只能跟着父容器同步运动。

修复方案：把动画绑定到每个圆点元素上 #

我们需要把动画从父容器移到每个<span>上，让每个圆点独立控制自己的动画和延迟时间，这样交错下落的效果就出来了。

修改后的完整代码如下：

HTML（无需改动）

<div class="ellipsis">
  <span>&#x2B24;</span>
  <span>&#x2B24;</span>
  <span>&#x2B24;</span>
</div>

CSS（调整动画绑定对象）

.ellipsis {
  padding: 0;
  margin: 0.33rem 0;
  width: 1rem;
  letter-spacing: 0.23rem;
  /* 移除父容器的动画，交给子元素单独控制 */
  
  & span {
    display: inline-block;
    font-size: var(--step-0);
    /* 给每个圆点绑定下落动画 */
    animation: fall 1.3s forwards;
    /* 初始状态与动画起始帧一致，避免加载时的闪烁 */
    transform: translateY(-44px);
  }
  
  & :nth-child(1) {
    /* 第一个圆点无延迟，立即开始 */
    animation-delay: 0s;
  }
  
  & :nth-child(2) {
    /* 第二个圆点延迟0.4s启动 */
    animation-delay: 0.4s;
  }
  
  & :nth-child(3) {
    /* 第三个圆点延迟0.7s启动 */
    animation-delay: 0.7s;
  }
}

@keyframes fall {
  0% { transform: translateY(-44px); }
  100% { transform: translateY(7px); }
}

额外说明 #

1. 为什么加初始transform？
   给span设置transform: translateY(-44px)是为了和动画的0%状态对齐，避免页面刚加载时，圆点先出现在最终位置，再跳回起始点的尴尬闪烁。

2. 关于负延迟的小补充
   如果你原本想用负延迟（比如让动画从中间状态开始，看起来像是已经下落了一段距离），也可以保留-0.4s这类值，但前提是必须把动画绑定在子元素上，延迟才能生效。

3. 优化动画质感
   可以给动画加上animation-timing-function: ease-in-out，让下落的动作更自然流畅，比如：

   animation: fall 1.3s ease-in-out forwards;
   

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