CSS动画的后续元素延迟

由 发布于 cssanimationhtmlcss-transitions
 收藏

我正在尝试以交错方式将三个点“掉落”到屏幕上，使它们动画化：每个点在视口中的显示都略有延迟。由于某种原因，延迟没有应用到后续元素，它们都立即出现。标记：

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

CSS (nesting courtesy of postcss):

.ellipsis {
  padding: 0;
  margin: 0.33rem 0;
  width: 1rem;
  letter-spacing: 0.23rem;
  animation: fall 1.3s forwards;

  & span {
    display: inline-block;
    font-size: var(--step-0);
  }

  & :nth-child(2) {
    animation-delay: -0.4s;
  }

  & :nth-child(3) {
    animation-delay: -0.7s;
  }
}

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

  100% {
    transform: translateY(7px);
  }
}

我忘了什么？