Is there a way to initialize the counter on page load? Even though I was successful in making it start on hover, I couldn't figure out how to make it work when the page loads.
Here is the JavaScript code:
var root = document.querySelector(':root');
var rootStyles = getComputedStyle(root);
var start= rootStyles.getPropertyValue('--start');
var finish= rootStyles.getPropertyValue('--finish');
//function that provides data for these values
root.style.setProperty('--start', +storedelo-300);
root.style.setProperty('--finish', +storedelo);
And here is the CSS code:
:root {
--start: 0;
--finish: 0;
}
@property --num {
syntax: "<integer>";
initial-value: 0;
inherits: false;
}
div {
transition: --num 5s;
--num: var(--start);
counter-set: num var(--num);
}
div::after {
content: counter(num);
}
div::hover {
--num: var(--finish);
}
Additionally, the @keyframes rule seems to not be working properly for some reason:
@keyframes counter {
from {
--num: var(--start);
}
to {
--num: var(--finish);
}
}