使用 CSS 动画数字增量（使用关键帧动画 CSS @property 整数）答案

【问题标题】：Animate number increments with CSS (Animate CSS @property integer with keyframes)使用 CSS 动画数字增量（使用关键帧动画 CSS @property 整数）
【发布时间】：2021-04-05 21:31:17
【问题描述】：

有一种很好的方法可以仅使用 CSS 或借助用于动态值的 Web Animations API（参见代码 sn-p）来为数字增加/减少设置动画。

通过创建自定义 CSS @property 作为整数数据类型 - 我们可以使用关键帧对其进行动画处理。

在使用大量数字之前它工作得很好。当计数器超过 999999 时，它设置为 0 表示任何大于此数字的值。如果我在没有 javascript 的情况下使用 CSS - 数字会稍微高一些，但最终也会设置为零。

有没有人知道是什么原因。数据类型是一个 32 位整数，最大可达 2,147,483,647。

document.getElementById('count1').animate([
  { '--num': 0 },
  { '--num': 10000 },
  { '--num': 999999 }
], {
  duration: 3000,
    fill: 'forwards',
    iterations: 1
});

document.getElementById('count2').animate([
  { '--num': 0 },
  { '--num': 100 },
  { '--num': 1000000 }
], {
  duration: 2000,
    fill: 'forwards',
    iterations: 1
});

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

div {
  counter-set: num var(--num);
  font-size: 40px;
  font-weight: bold;
}

div:after {
  content: counter(num);
}

<div id="count1"></div>
<div id="count2"></div>

【问题讨论】：

将整数更改为数字，以便能够在 css => 语法中显示直到 999999 的数字："";
@Fantantonio 它应该是整数，因为计数器设置接受整数（即使数字可能有效）
应该试一试... 扩展了的语法
@Fantantonio 我知道这是问题所在，因为接受整数不一定接受数字（只有相反的情况）。这是一个我在处理数字而不是整数时遇到问题的示例：stackoverflow.com/a/54447986/8620333 .. 如果我们使用数字而不是整数，这里可能会发生同样的情况

标签： javascript html css animation

【解决方案1】：

我不知道是什么原因造成的，但这里有一个解决方法。

@property --num1 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --num2 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

@property --num3 {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}

div {
  counter-reset: num1 var(--num1) num2 var(--num2) num3 var(--num3);
  font-size: 40px;
  font-weight: bold;
  animation: animate 2s forwards ease;
}

div:before {
  content: counter(num1) counter(num2) counter(num3);
}

@keyframes animate {
  to {
    --num1: 3;
    --num2: 8;
    --num3: 999999;
  }
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

这些是连接在一起的 3 个不同的值。我正在寻找一种动画实际值的方法。我正在从数组构建关键帧。