CSS анимация анимации с задержкой на последующих элементах

Question

Я пытаюсь анимировать три точки, «падающие» на экран в шахматном порядке: каждая точка появляется в окне просмотра с небольшой задержкой. По какой-то причине задержка не применяется к последующим элементам, все они появляются сразу. Разметка:

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

CSS (вложенность предоставлена ​​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);
  }
}

Что я забыл?

Answer 1

Анимация должна быть на элементах <span>, а не на контейнере .ellipsis:

.ellipsis {
  padding: 0;
  margin: 0.33rem 0;
  width: 1rem;
  letter-spacing: 0.23rem;
}

.ellipsis span {
  display: inline-block;
  animation: fall 1.3s forwards;
  transform: translateY(-78px);
  font-size: var(--step-0);
}

.ellipsis span:nth-child(2) {
  animation-delay: 0.7s;
}

.ellipsis span:nth-child(3) {
  animation-delay: 1.4s;
}

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

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

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

Answer 2

Чтобы оживить точки, а не контейнер , вы должны добавить animation: fall 1.3s forwards; к span, а не к .ellipsis.