Css 如何制作动画'；脉冲'；每个元素而不是单个元素？

到目前为止，我的动画“脉冲”每个奇数元素，然后切换到偶数元素

我想达到这样的效果，序列中的每个元素依次单独脉冲

以下是我到目前为止得到的信息：

.pulse-through {
    span {
        display: inline-block;
        @include animation('pulse 0.4s alternate infinite ease-in-out');

        &:nth-child(odd) {
            animation-delay: 0.4s;
        }
    }
}

/* KEYFRAME ANIMATIONS */
@include keyframes(pulse) {
    to {
        @include transform(scale(0.8));
        opacity: 0.5;
    }
}

---

“我的包含”只是常规的css转换和动画，但对于每个浏览器，为了简化，请尝试以下操作：

.pulse-through {
    span {
        display: inline-block;
        @include animation('pulse 0.4s alternate infinite ease-in-out');

        @for $i from 1 through 20 {
            // limit the amount by some count, or try another way
            // if that doesn't work
            &:nth-child(#{$i}) {
                animation-delay: ($i * 0.2s);
            }
        }
    }
}

---

必须有一种更有效的方法，我考虑过这样做，但是如果/mroe少于20个元素呢？加上代码不起作用，第n个子表达式不能接受$iSorry，忘记插入选择器。更新，现在应该可以工作了。而且，如果您将一些JS合并到它中，它会更容易-但是CSS/SASS只是。。。据我所知，没有比这更好的办法了。您可以将20增加到任意数字，但请记住，它们不会全部显示在屏幕上，您可能希望找到正确的数字