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

【问题标题】：animation-delay property isn't working in Sass for loop动画延迟属性在 Sass for 循环中不起作用
【发布时间】：2018-02-21 10:13:25
【问题描述】：

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

由于无法识别的原因，它只是无法正常工作：

https://jsfiddle.net/ctu7tcru/

我已经确定：

元素选择得很好（注意background是如何变化的）
它与 SVG 没有任何关系
与动画无限无关

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

This 的答案似乎完全一样，但我复制了它，它没有工作。不知道。

【问题讨论】：

标签： css animation svg sass delay

【解决方案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 的一个分支。

【讨论】：