madcrazydrumma madcrazydrumma - 3 months ago 10
Sass (Sass) Question

How can I make my animation 'pulse' each element rather than odd ones?

So far my animation 'pulses' each odd element and then switches to even elements.

I want to achieve the effect where each element in the sequence pulses separately one by one in order.

Here is what I've got so far:

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


My includes are just the regular css transforms and animations but for each browser, to simplify it.

Answer

Try something like this:

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