CSS动画增加计数器

Posted 2023-03-05

【中文标题】CSS动画增加计数器

【英文标题】：CSS Animation to Increment Counter

【发布时间】：2018-04-18 19:24:29

【问题描述】：

我最近一直在玩 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 计数器无法做到这一点？

【问题讨论】：

顺便说一句：CSS 变量可以用于我们的伪内容。 jsfiddle.net/Skateside/n153kusw

@JamesLong 这很有趣！我试图增加一个整数变量并且它不会显示，但是字符串可以代替。 jsfiddle.net/d25j9vL3/16

here is a solution for it 虽然它对浏览器还不是很友好。这是它的codepen

【参考方案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));
       
   );
);

Refer This