数字计数器动画

数字动画，例如，想象一个数字从 1 变成 2，然后从 2 变成 3，然后从 3 变成 4，依此类推，持续指定时间。就像一个计数器，只不过由我们用于 Web 上其他设计动画的相同类型的动画控制。这在设计仪表盘等内容时可能很有用，可以为数字增添一点活力。令人惊奇的是，现在可以在 CSS 中完成此操作，无需太多技巧。如果您愿意，可以直接跳转到新的解决方案，但首先让我们看看我们过去是如何做到的。

一种相当合乎逻辑的数字动画方法是通过 JavaScript 更改数字。我们可以做一个相当简单的setInterval，但这里有一个更高级的答案，带有一个接受开始、结束和持续时间的函数，因此您可以将其视为动画

仅使用 CSS，我们可以使用 CSS 计数器通过在不同的关键帧中调整计数来为数字制作动画

另一种方法是将所有数字排成一行，并为它们制作动画，一次只显示一个

这些示例中的一些重复代码可以使用像 Pug 用于 HTML 或 SCSS 用于 CSS 的预处理器，这些预处理器提供循环来使它们可能更容易管理，但出于目的而使用原生代码，以便您可以看到基本思想。

新的 CSS 解决方案

随着最近对CSS.registerProperty 和 @property 的支持，我们可以为 CSS 变量制作动画。诀窍是将 CSS 自定义属性声明为整数；这样就可以像任何其他整数一样对其进行插值（例如在过渡中）。

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

div {
  transition: --num 1s;
  counter-reset: num var(--num);
}
div:hover {
  --num: 10000;
}
div::after {
  content: counter(num);
}

重要说明：在撰写本文时，此@property 语法仅在 Chrome（以及其他基于 Chromium 的浏览器，如 Edge 和 Opera）中受支持，因此它不适用于所有浏览器。如果您正在构建仅适用于 Chrome 的内容（例如 Electron 应用程序），那么它立即很有用，否则，请等待。上面演示的示例支持范围更广。

CSS content 属性可用于显示数字，但我们仍然需要使用counter 将数字转换为字符串，因为content 只能输出<string> 值。

看到我们如何像任何其他动画一样缓动动画了吗？超级酷！

类型化的 CSS 变量也可用于@keyframes：

缺点是什么？计数器仅支持整数。这意味着小数和分数不在考虑范围内。我们将不得不以某种方式分别显示整数部分和小数部分。

我们可以为小数制作动画吗？

可以将小数（例如--number）转换为整数。以下是其工作原理

1. 注册一个<integer> CSS 变量（例如--integer），并指定initial-value
2. 然后使用calc() 对值进行四舍五入：--integer: calc(var(--number))

在这种情况下，--number 将被四舍五入到最接近的整数，并将结果存储到--integer 中。

@property --integer {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
--number: 1234.5678;
--integer: calc(var(--number)); /* 1235 */

有时我们只需要整数部分。有一种巧妙的方法可以做到这一点：--integer: max(var(--number) - 0.5, 0)。这适用于正数。这样甚至不需要calc()。

/* @property --integer */
--number: 1234.5678;
--integer: max(var(--number) - 0.5, 0); /* 1234 */

我们可以以类似的方式提取小数部分，然后使用计数器将其转换为字符串（但请记住，content 值必须是字符串）。要显示连接的字符串，请使用以下语法

content: "string1" var(--string2) counter(--integer) ...

这是一个完整示例，用于为带小数的百分比制作动画

其他提示

因为我们使用的是 CSS 计数器，这些计数器的格式可以采用除数字之外的其他格式。这是一个将字母“CSS”动画化为“YES”的示例！

哦，还有一个提示：我们可以使用 JavaScript 获取自定义属性的计算值来调试值

getComputedStyle(element).getPropertyValue('--variable')

就是这样！CSS 如今的功能真是令人惊叹。