css - 动画延迟属性在 Sass for 循环中不起作用

Question

我试图根据索引延迟一组元素的动画开始时间，以便它们的动画按顺序开始。

由于无法确定的原因，它无法正常工作:

https://jsfiddle.net/ctu7tcru/

我已经确定:

• 元素选择得很好(注意 background 是如何变化的)

• 与SVG无关

• 与动画无限无关

看起来，当您尝试更改循环中的 animation-delay 属性时，它只是不起作用。它在循环外时有效，在循环中时无效(在任何情况下)。

This答案似乎完全一样，但我复制了它，但没有用。伊诺。

Answer 1

@JackHasaKeyboard，这是一个特异性问题。

#prog {
  height: 76px;
  display: flex;
  justify-content: center;
  align-items: center;
  .dot {
    animation: pulse 1.6s infinite;
  }
}

@for $i from 1 through 3 {
  #prog .dot:nth-child(#{$i}) {
    animation-delay: $i * 1.6s;
    background: red;
  }
}

将 #prog id 添加到您的循环中，它应该可以工作。

这是你的 jsfiddle 的 fork .