The CSS counter presented in this example (https://codepen.io/bgbos/pen/pobZvwJ) consists of 4 divs, each with a different initial value. However, at the end of the animation, only one value appears instead of each div's respective initial value.
Here is the original code where only one value is working correctly, utilizing CSS and HTML:
@property --num {
syntax: "<integer>";
initial-value: 984;
inherits: false;
}
#twitter {
animation: counter 3.9s infinite alternate ease-in-out;
animation-iteration-count:1;
counter-reset: num var(--num);
}
#twitter::before {
content: counter(num);
}
@keyframes counter {
from {
--num: 0;
}
to {
--num: 100;
}
}
@property --num {
syntax: "<integer>";
initial-value: 402;
inherits: false;
}
#instagram {
animation: counter 3.9s infinite alternate ease-in-out;
animation-iteration-count:1;
counter-reset: num var(--num);
}
#instagram::before {
content: counter(num);
}
@property --num {
syntax: "<integer>";
initial-value: 254;
inherits: false;
}
#facebook {
animation: counter 3.9s infinite alternate ease-in-out;
animation-iteration-count:1;
counter-reset: num var(--num);
}
#facebook::before {
content: counter(num);
}
@property --num {
syntax: "<integer>";
initial-value: 610;
inherits: false;
}
#youtube {
animation: counter 3.9s infinite alternate ease-in-out;
animation-iteration-count:1;
counter-reset: num var(--num);
}
#youtube::before {
content: counter(num);
}<div id="twitter" ></div>
<div id="instagram" ></div>
<div id="facebook" ></div>
<div id="youtube" ></div>I attempted to make edits on https://codepen.io/CarterLi/pen/NWNJvPE, but encountered some challenges as I am still a beginner. Any help provided will be greatly appreciated.