CSS 动画整数计数器：实现多个独立数值递增效果-html教程-PHP中文网

CSS 动画整数计数器：实现多个独立数值递增效果

本文介绍如何使用 CSS @property 和自定义动画，为网页中多个不同目标值的数字计数器（如年份、项目数、员工数等）创建平滑、独立的递增动画效果。

本文介绍如何使用 css `@property` 和自定义动画，为网页中多个不同目标值的数字计数器（如年份、项目数、员工数等）创建平滑、独立的递增动画效果。

在现代 CSS 中，借助 @property（CSS 自定义属性注册）和 counter() 函数，我们可以实现纯 CSS 驱动的整数计数器动画——无需 JavaScript。但一个常见误区是试图复用同一组 @keyframes 名称并多次覆盖定义（如多次声明 @keyframes counter），这会导致样式失效，因为 CSS 规范要求每个动画名称必须唯一。

要让多个计数器各自朝不同终点值（如 20、55、10、115）独立运行动画，关键在于：为每个计数器分配专属的 @keyframes 规则，并通过 CSS 自定义属性动态绑定动画名称与目标值。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

✅ 正确实现步骤

注册自定义属性 --num
使用 @property 显式声明 --num 为 <integer></integer> 类型，确保其可被动画引擎正确插值：

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

定义多个唯一命名的 @keyframes
每个计数器对应一个动画，to 关键帧中指定其专属终值：

@keyframes counter-years {
  from { --num: 0; }
  to   { --num: 20; }
}

@keyframes counter-projects {
  from { --num: 0; }
  to   { --num: 55; }
}

@keyframes counter-employees {
  from { --num: 0; }
  to   { --num: 10; }
}

@keyframes counter-customers {
  from { --num: 0; }
  to   { --num: 115; }
}

统一应用动画逻辑，按需注入动画名
利用 animation: var(--animation) 实现“配置化”动画调用，并通过 counter-reset 绑定当前 --num 值：

div span {
  counter-reset: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
  animation: var(--animation) 5s forwards ease-in-out;
}

div span::after {
  content: counter(num) '+';
}

HTML 中按需指定动画类型
在每个 <span></span> 上通过内联样式或类设置 --animation，精准匹配对应 @keyframes：

<section style="display: flex; justify-content: space-around; align-items: center; height: 100%;"><div class="single-counter">
    <div class="counter-contents">
      <h2><span class="years-number" style="--animation: counter-years"></span></h2>
      <h3>Years of Experience</h3>
    </div>
  </div>
  <div class="single-counter">
    <div class="counter-contents">
      <h2><span class="project-number" style="--animation: counter-projects"></span></h2>
      <h3>Complete Projects</h3>
    </div>
  </div>
  <div class="single-counter">
    <div class="counter-contents">
      <h2><span class="employee-number" style="--animation: counter-employees"></span></h2>
      <h3>Employees</h3>
    </div>
  </div>
  <div class="single-counter">
    <div class="counter-contents">
      <h2><span class="customers-number" style="--animation: counter-customers"></span></h2>
      <h3>Customers</h3>
    </div>
  </div>
</section>

⚠️ 注意事项

浏览器兼容性：@property 目前仅支持 Chrome 103+、Edge 103+、Safari 16.4+（Firefox 尚未支持）。生产环境建议添加 JS 回退方案。
counter() 的局限性：counter(num) 仅支持整数，且依赖 counter-reset；无法直接格式化（如千分位），如需复杂格式请改用 content-visibility + JS 或 attr() + 数据属性。
性能提示：避免在大量元素上同时触发长时动画；可结合 intersection-observer 实现滚动触发动画，提升首屏性能。
语义增强：为无障碍访问，建议为计数器添加 aria-live="polite" 和 role="status"，并在动画结束后更新 aria-valuenow。