Question

我试图延迟一组元素＆＃39;动画根据它们的索引开始，因此它们的动画按顺序开始。

由于一个无法辨认的原因，它只是不起作用：

https://jsfiddle.net/ctu7tcru/

我发现了：

选择的元素很好（请注意background的变化情况）
它与SVG
它与动画无限无关

看起来，当您尝试更改循环中的animation-delay属性时，它无法正常工作。当它在循环之外时它起作用，并且当它在其中时不起作用（在任何情况下）。

This答案似乎完全相同，但我复制了它并且它没有用。 Iunno。

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的一个分支。

动画延迟属性不在Sass for循环中工作

1 个答案: