同一Banner下多CSS Animation整数计数器无法独立生效问题求助

需求是在HTML页面Banner中实现多个独立的整数计数器，每个计数器递增到对应div设定的不同目标值，但当前所有计数器行为异常，无法独立运行。

问题根源 #

• CSS中重复定义了同名的@keyframes counter，后定义的动画会覆盖之前的，导致所有计数器最终都使用最后一个动画的目标值（115）
• 仅.years-number元素添加了动画属性，其余计数器元素未绑定对应的动画
• 所有计数器共用同一套动画逻辑，没有独立的目标值区分

修正方案 #

为每个计数器创建唯一名称的动画，绑定到对应元素，并确保每个动画的目标值匹配需求：

修正后的CSS代码

html,
body {
  width: 100%;
  height: 100%;
}

* {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  font-family: roboto, segoe ui, Verdana, Helvetica, Sans-Serif;
  font-size: 16px;
}

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

/* 年份计数器 */
div span.years-number {
  animation: counter-years 5s forwards ease-in-out;
  counter-reset: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
}
div span.years-number::after {
  content: counter(num);
}
@keyframes counter-years {
  from { --num: 0; }
  to { --num: 20; }
}

/* 项目计数器 */
div span.project-number {
  animation: counter-projects 5s forwards ease-in-out;
  counter-reset: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
}
div span.project-number::after {
  content: counter(num);
}
@keyframes counter-projects {
  from { --num: 0; }
  to { --num: 55; }
}

/* 员工计数器 */
div span.employee-number {
  animation: counter-employees 5s forwards ease-in-out;
  counter-reset: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
}
div span.employee-number::after {
  content: counter(num);
}
@keyframes counter-employees {
  from { --num: 0; }
  to { --num: 10; }
}

/* 客户计数器 */
div span.customers-number {
  animation: counter-customers 5s forwards ease-in-out;
  counter-reset: num var(--num);
  font: 800 40px system-ui;
  padding: 2rem;
}
div span.customers-number::after {
  content: counter(num);
}
@keyframes counter-customers {
  from { --num: 0; }
  to { --num: 115; }
}

修正后的HTML代码

<section style="position: relative; z-index: 1; text-align: center; display: flex;">
  <div style="flex: 0 0 auto; width: 25%; scroll-behavior: inherit !important;">
    <div class="single-counter">
      <div class="counter-contents">
        <h2 style="color: #000000; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px;">
          <span class="years-number"></span>
          <span>+</span>
        </h2>
        <h3 style="color: #000; font-size: 20px; font-weight: 600;">Years of Experience</h3>
      </div>
    </div>
  </div>
  <div style="flex: 0 0 auto; width: 25%; scroll-behavior: inherit !important;">
    <div class="single-counter">
      <div class="counter-contents">
        <h2 style="color: #000; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px;">
          <span class="project-number"></span>
          <span>+</span>
        </h2>
        <h3 style="color: #000; font-size: 20px; font-weight: 600;">Complete Project</h3>
      </div>
    </div>
  </div>
  <div style="flex: 0 0 auto; width: 25%; scroll-behavior: inherit !important;">
    <div class="single-counter">
      <div class="counter-contents">
        <h2 style="color: #000; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px;">
          <span class="employee-number"></span>
          <span>+</span>
        </h2>
        <h3 style="color: #000; font-size: 20px; font-weight: 600;">Employees</h3>
      </div>
    </div>
  </div>
  <div style="flex: 0 0 auto; width: 25%; scroll-behavior: inherit !important;">
    <div class="single-counter">
      <div class="counter-contents">
        <h2 style="color: #000; font-size: 45px; font-weight: 700; margin-bottom: 5px; word-spacing: -10px;">
          <span class="customers-number"></span>
          <span>+</span>
        </h2>
        <h3 style="color: #000; font-size: 20px; font-weight: 600;">Customers</h3>
      </div>
    </div>
  </div>
</section>

说明 #

• 每个计数器对应唯一的动画名称（如counter-years、counter-projects），避免动画覆盖
• 所有计数器元素都添加了动画属性和样式，确保独立运行
• 每个动画的to值对应各自的目标数值，实现不同的递增效果
• HTML中添加了display: flex让四个计数器横向排列（原有代码缺少此属性，导致布局可能错乱）

内容的提问来源于stack exchange，提问作者MikeC