Dynamic css registered property-CodePudding

If I make use of css registered property

How can I pass on dynamic values?

For example, in the following example, how can I pass on ---numValue=35 to to{--num:}

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

div {
    counter-reset: num var(--num);
    animation: counter 3s linear 1 forwards;
}

div::before {
    content: counter(num);
}

@keyframes counter {
    to {
        --num: 60
    }
}

<div style="--numValue:35"></div>

CodePudding user response：

By adding from property in transition with the value that you passed dynamically, the number can start from the given one

@keyframes counter {
        from {
            --num: var(--numValue)
        }
        to {
            --num: 60
        }
    }

@property --num {
    syntax: "<integer>";
    initial-value: 0;
    inherits: false;
}

div {
    counter-reset: num var(--num);
    animation: counter 3s linear 1 forwards;
}

div::before {
    content: counter(num);
}

@keyframes counter {
    from {
        --num: var(--numValue)
    }
    to {
        --num: 60
    }
}

<div style="--numValue:35"></div>