CSS Animation to Increment Counter

Question

I've been playing around with CSS counters lately and I wondered if it was possible to put them in a CSS animation loop and increment them. My code is fairly simple:

div {
    animation-name: anim;
    animation-duration: 0.5s;
    animation-iteration-count: 10;
    animation-fill-mode: forwards;
}

div:before {
    counter-increment: variable;
    content: counter(variable);
}

@keyframes anim {
    100% { counter-increment: variable; }
}

<div></div>

You can see the number goes up, but then it snaps back to 1. I assumed the animation-fill-mode: forwards would prevent that from happening, but I guess not.

Am I doing something wrong, or is this not possible with CSS counters?

Just as an aside: CSS variables can be used us pseudo content. https://jsfiddle.net/Skateside/n153kusw/ — James Long, Nov 06 '17 at 15:36
@JamesLong That's interesting! I was trying to increment an integer variable and it wouldn't show, but strings work instead. https://jsfiddle.net/d25j9vL3/16/ — Kenton de Jong, Nov 06 '17 at 15:43
[here is a solution for it](https://css-tricks.com/animating-number-counters/) though it's not very browser friendly yet. here is its [codepen](https://codepen.io/CarterLi/pen/NWNJvPE) — Mahmood Kiaheyrati, Dec 06 '20 at 02:17

score -4 · Answer 1 · edited Apr 07 '21 at 12:00

It can be easily achieved using a simple script code, try this

<div><span class="count">200</span></div>
<div><span class="count">177</span></div>

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
       Counter: $(this).text()
    }, {
       duration: 4000,
       easing: 'swing',
       step: function (now) {
          $(this).text(Math.ceil(now));
       }
   });
});

Refer This

CSS Animation to Increment Counter

1 Answers1