我试图根据索引延迟一组元素的动画开始时间,以便它们的动画按顺序开始。
由于无法确定的原因,它无法正常工作:
https://jsfiddle.net/ctu7tcru/
我已经确定:
元素选择得很好(注意
background
是如何变化的)与SVG无关
与动画无限无关
看起来,当您尝试更改循环中的 animation-delay
属性时,它只是不起作用。它在循环外时有效,在循环中时无效(在任何情况下)。
This答案似乎完全一样,但我复制了它,但没有用。伊诺。
最佳答案
@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 .
关于css - 动画延迟属性在 Sass for 循环中不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46185019/