Carry Posts - Answer Overflow

Carry

•Created by Carry on 4/18/2024 in #front-end

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.

3 replies

Gaming

Programming