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

参考这个