Kevin Powell - Community•3mo ago

Inline staggered animation doesn't working

I want to make a staggered animation with css. And my count of element is not exact. So i should write dynamic css code. But it doesn't work. Here is my code:

.reference__card{
    /there is some long css/
    ...
    animation: flip 1s ease-in-out forwards;
    counter-increment: --my-counter;
    animation-delay: calc(var(--my-counter) * 100ms);
}

.reference__card{
    /there is some long css/
    ...
    animation: flip 1s ease-in-out forwards;
    counter-increment: --my-counter;
    animation-delay: calc(var(--my-counter) * 100ms);
}

But value of my-counter variable is always 0. Can you help me.

2 Replies

SvenSplynter•3mo ago

Could you create a code pen please?

Chris Bolson•3mo ago

Where are you defining the value of --my-counter? Custom properties are only available within the element where they are created and their children.

Gaming

Programming

Inline staggered animation doesn't working