CSS анимация для увеличения счетчика

Question

В последнее время я поиграл со счетчиками CSS, и мне стало интересно, возможно ли поместить их в цикл анимации CSS и увеличивать их. Мой код довольно прост:

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>

Вы можете видеть, что число увеличивается, но затем оно возвращается к 1. Я предположил, что animation-fill-mode: forwards предотвратил бы это, но я не думаю.

Я делаю что-то не так, или это невозможно с помощью счетчиков CSS?

Answer 1

Этого легко добиться с помощью простого кода сценария, попробуйте это

      <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));
       }
   });
});

Обратитесь к этому