react-countup

地址

https://github.com/glennreyes/react-countup
https://www.npmjs.com/package/react-countup

效果

react-countup.gif

Ant Motion（动效组件）

地址

单元素动画 - 数值变化 - Ant Motion

效果

数值变化.gif

纯 CSS 实现数字动画

https://css-tricks.com/animating-number-counters/
要写一个数字从 0-100 增长的动画效果，可能首先会想到用 setInterval，但是其实你可以试试 New School 的 CSS 解决方案。

示例一（手动触发）

css 数字动画.gif

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       @property --num {
  10.         syntax: '<integer>';
  11.         initial-value: 0;
  12.         inherits: false;
  13.       }
  15.       div {
  16.         transition: --num 5s;
  17.         counter-set: num var(--num);
  18.         font: 800 40px system-ui;
  19.       }
  20.       div::after {
  21.         content: counter(num);
  22.       }
  23.       div:hover {
  24.         --num: 100;
  25.       }
  27.       body {
  28.         margin: 2rem;
  29.       }
  30.     </style>
  31.   </head>
  32.   <body>
  33.     Hover the number.
  34.     <div></div>
  35.   </body>
  36. </html>

示例二（也可以用于 @keyframes 自动触发）

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       @property --num {
  10.         syntax: '<integer>';
  11.         initial-value: 0;
  12.         inherits: false;
  13.       }
  15.       div {
  16.         animation: counter 5s infinite alternate ease-in-out;
  17.         counter-reset: num var(--num);
  18.         font: 800 40px system-ui;
  19.         padding: 2rem;
  20.       }
  21.       div::after {
  22.         content: counter(num);
  23.       }
  25.       @keyframes counter {
  26.         from {
  27.           --num: 0;
  28.         }
  29.         to {
  30.           --num: 100;
  31.         }
  32.       }
  33.     </style>
  34.   </head>
  35.   <body>
  36.     <div></div>
  37.   </body>
  38. </html>

示例三（携带小数）

css 数字小数动画.gif

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7.     <title>Document</title>
  8.     <style>
  9.       @property --percent {
  10.         syntax: '<number>';
  11.         initial-value: 0;
  12.         inherits: false;
  13.       }
  14.       @property --temp {
  15.         syntax: '<number>';
  16.         initial-value: 0;
  17.         inherits: false;
  18.       }
  19.       @property --v1 {
  20.         syntax: '<integer>';
  21.         initial-value: 0;
  22.         inherits: false;
  23.       }
  24.       @property --v2 {
  25.         syntax: '<integer>';
  26.         initial-value: 0;
  27.         inherits: false;
  28.       }
  30.       div {
  31.         font: 800 40px monospace;
  32.         padding: 2rem;
  33.         transition: --percent 1s;
  34.         --temp: calc(var(--percent) * 100);
  35.         --v1: max(var(--temp) - 0.5, 0);
  36.         --v2: max((var(--temp) - var(--v1)) * 100 - 0.5, 0);
  37.         counter-reset: v1 var(--v1) v2 var(--v2);
  38.       }
  39.       div::before {
  40.         content: counter(v1) '.' counter(v2, decimal-leading-zero) '%';
  41.       }
  42.     </style>
  43.   </head>
  44.   <body>
  45.     <div></div>
  46.     <script>
  47.       const genNumber = () => {
  48.         document
  49.           .querySelector('div')
  50.           .style.setProperty('--percent', Math.random());
  51.       };
  53.       setInterval(genNumber, 2000);
  54.       setTimeout(genNumber);
  55.     </script>
  56.   </body>
  57. </html>