Javascript 使用CSS设置数字增量动画（使用关键帧设置CSS@property integer的动画）

有一种很好的方法可以只使用CSS或借助Web动画API为动态值设置数字增减动画（请参见代码片段）

通过创建一个自定义CSS@属性作为整数数据类型，我们可以使用关键帧为其设置动画

在使用大量数据之前，它非常有效。当计数器通过9999999–大于此数字的任何值都将设置为0。如果我在没有javascript的情况下使用CSS，这个数字会稍高一些，但最终也会设置为零

有人知道是什么原因吗。该数据类型是一个32位整数，最大值应为2147483647

document.getElementById（'count1'）.animate([
{'--num'：0}，
{'-num'：10000}，
{'--num'：999999}
], {
时长：3000，
填写：'向前'，
迭代次数：1
});
document.getElementById（'count2'）。动画([
{'--num'：0}，
{'-num'：100}，
{'--num'：1000000}
], {
期限：2000年，
填写：'向前'，
迭代次数：1
});
@属性--num{
语法：“”；
初始值：0；
继承：假；
}
div{
计数器集：num var（--num）；
字体大小：40px；
字体大小：粗体；
}
部门：之后{
内容：计数器（num）；
}
我不知道这是什么原因造成的，但这里有一个解决办法


@属性--num1{
语法：“”；
初始值：0；
继承：假；
}
@财产——num2{
语法：“”；
初始值：0；
继承：假；
}
@属性——num3{
语法：“”；
初始值：0；
继承：假；
}
div{
计数器复位：num1 var（-num1）num2 var（-num2）num3 var（-num3）；
字体大小：40px；
字体大小：粗体；
动画：轻松制作动画；
}
部门：以前{
内容：计数器（num1）计数器（num2）计数器（num3）；
}
@关键帧设置动画{
到{
--num1:3；
--num2:8；
--num3:99999；
}
}
将整数更改为数字，以便能够在css=>语法中显示999999之前的数字：“”@Fantantonio它应该是整数，因为计数器集接受整数（即使这个数字可以工作），但它应该尝试一下。。。扩展@Fantantonio的语法我知道问题出在哪里，因为接受整数并不一定接受数字（只有相反的才是真的）。这里有一个我处理数字而不是整数的问题的例子：。。如果我们使用数字而不是整数，同样的情况也会发生。这是三个不同的值，它们是串联在一起的。我正在寻找一种方法来制作实际值的动画。我正在从阵列构建关键帧。