CSS 动画动画在后续元素上具有延迟答案

【问题标题】：CSS animation animation with delay on subsequent elementsCSS 动画动画在后续元素上具有延迟
【发布时间】：2020-08-24 21:30:54
【问题描述】：

我正在尝试以交错的方式将三个点“落”到屏幕上进行动画处理：每个点都会稍微延迟出现在视口中。由于某种原因，延迟没有应用于后续元素，它们都同时出现。标记：

  <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);
  }
}

我忘记了什么？

【问题讨论】：

标签： html css animation css-transitions

【解决方案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>

【讨论】：

【解决方案2】：

要为点设置动画，而不是容器，您应该将 animation: fall 1.3s forwards; 添加到 span，而不是添加到 .ellipsis。

【讨论】：

我只是在准备sn-p，没有sn-p你会更快，反正+1！