Question

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

我希望实现序列中每个元素按顺序逐个脉冲的效果。

这是我到目前为止所得到的：

.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转换和动画，但是对于每个浏览器，都要简化它。

Answer 1

尝试这样的事情：

.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);
            }
        }
    }
}

我怎样才能制作动画片＆＃39;脉冲＆＃39;每个元素而不是奇数元素？

1 个答案: