Property registered in CSS dynamically

Question

Property registered in CSS dynamically

Is it possible to pass dynamic values when using the css registered property?

For instance, in the code snippet below, how can I pass on the value ---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>

html css

Answer 1

Answer №1

To ensure the counter starts from a specific value by dynamically passing it as the 'from' property in the transition, you can set up the keyframes accordingly:

@keyframes count-up {
        from {
            --start-num: var(--initialValue)
        }
        to {
            --start-num: 60
        }
    }

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

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

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

@keyframes count-up {
    from {
        --start-num: var(--initialValue)
    }
    to {
        --start-num: 60
    }
}

<div style="--initialValue:42"></div>

Answer 2

To ensure the counter starts from a specific value by dynamically passing it as the 'from' property in the transition, you can set up the keyframes accordingly:

@keyframes count-up {
        from {
            --start-num: var(--initialValue)
        }
        to {
            --start-num: 60
        }
    }

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

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

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

@keyframes count-up {
    from {
        --start-num: var(--initialValue)
    }
    to {
        --start-num: 60
    }
}

<div style="--initialValue:42"></div>

Property registered in CSS dynamically

Answer №1

Similar questions

Converting canvas illustrations into HTML files

What sets srcset apart from media queries?

Can you explain how I can use AJAX in HTML to change the text of a link once it has been clicked on?

Navigating to different HTML pages by utilizing <a> elements in Angular 2

Using javascript to store HTML tags in a variable

Website glitch encountered on Flash when using Firefox and IE9, though surprisingly functions perfectly on IE6!

What is causing the issue with CSS properties and media queries not being effective on specific elements?

Struggling to create a flawless gradient fade transition

Unable to define a range for the hr element using the nth-of-type selector

Steps to remove a row from a table in a ReactJS component

Darkening the background of HTML and CSS text to black

Warning: The DataTables alert has been triggered for table ID DimStatus. It is indicating that an unknown parameter, 'Code', has been requested for row 0 and column 0 during the initialization

Clickable links and compliant W3C coding

Issue with PHP incorrectly encoding JSON when writing to a file

Changing the Position of HTML Scripts in React

Creating a web form with HTML and integrating it with jQuery AJAX

What could be causing my border to spill over into the adjacent div?

How to create a heading within a Bootstrap list item?

Updating the color of text when clicking on a link using javascript

Tips on displaying the entire text when hovering over it