CSS @property驱动计数器动画Chrome正常但Firefox/Safari不生效

你遇到的CSS动画跨浏览器不兼容问题，核心原因和animation属性无关，是你用来注册自定义属性的@property规则兼容性不足导致：

• Chrome 85及以上版本原生支持@property，因此动画可以正常运行
• Firefox 仅128及以上版本支持@property，低于该版本的火狐浏览器无法识别该规则
• Safari 仅16.4及以上版本支持@property，低于该版本的Safari均无法正常运行该动画

方案1：改用JavaScript实现数字滚动（全浏览器兼容） #

该方案不依赖CSS的@property特性，兼容所有主流浏览器版本，是目前最稳妥的解决方式：

1. 调整CSS代码，删除和自定义属性、CSS动画相关的逻辑，仅保留基础样式：

.vision-div {
  margin-top: 0rem;
  width: 100%;
  text-align: center;
}

.vision-grid-div {
  width: 100%;
  text-align: center;
  margin-top: 5rem;
}

.visionheading {
  font-size: 2.5rem;
  text-align: center;
}

.vision-subdiv1-heading, .vision-subdiv2-heading, .vision-subdiv3-heading {
  font-size: 2.8rem;
  font-weight: bold;
  position: relative;
  left: -1rem;
}

.vision-subdiv1-para, .vision-subdiv2-para, .vision-subdiv3-para {
  font-size: 1rem;
  text-align: center;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

.vision-div-para {
  width: 65%;
  margin-top: 2.8rem;
  font-size: 1.1rem;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

2. 调整HTML代码，删除不需要的百分号span节点：

<div className="vision-div container">
  <h1 className="visionheading">
    Why you should find a Fitness buddy!
  </h1>

  <div className="vision-grid-div row ">
    <div className="vision-subdiv1 col-sm-12 col-md-12 col-lg-4">
      <h4 className="vision-subdiv1-heading"></h4>
      <p className="vision-subdiv1-para ">
        People stop working out because of the Lack of Motivation
      </p>
    </div>
    <div className="vision-subdiv2 col-sm-12 col-md-12 col-lg-4 ">
      <h4 className="vision-subdiv2-heading "></h4>
      <p className="vision-subdiv2-para ">
        People stop working out because they are clueless about where to start
      </p>
    </div>
    <div className="vision-subdiv3 col-sm-12 col-md-12 col-lg-4">
      <h4 className="vision-subdiv3-heading "></h4>
      <p className="vision-subdiv3-para ">
        People are very inconsistent with their workouts
      </p>
    </div>
  </div>

  <p className="vision-div-para">
    Data from a Survey done by GymPik in 2019 across 5 metropolitan cities in India with a sample size of 1.6 million people.
  </p>
</div>

3. 添加JS数字滚动逻辑：

// 数字滚动实现函数
function runCounter(el, target, duration = 4000) {
  const startTime = performance.now();
  function update(currentTime) {
    const elapsed = currentTime - startTime;
    const progress = Math.min(elapsed / duration, 1);
    const currentNum = Math.floor(progress * target);
    el.textContent = `${currentNum}%`;
    if (progress < 1) {
      requestAnimationFrame(update);
    }
  }
  requestAnimationFrame(update);
}

// 页面加载完成后触发动画
window.addEventListener('load', () => {
  runCounter(document.querySelector('.vision-subdiv1-heading'), 50);
  runCounter(document.querySelector('.vision-subdiv2-heading'), 14);
  runCounter(document.querySelector('.vision-subdiv3-heading'), 30);
});

方案2：保留CSS方案，增加降级逻辑 #

如果希望保留CSS实现的动画，可以添加浏览器特性检测，对不支持@property的浏览器直接显示最终数值，避免出现显示异常：

// 检测浏览器是否支持@property
const supportProperty = CSS.supports('@property --t', 'syntax:"<integer>";initial-value:0;inherits:false;');
if (!supportProperty) {
  document.querySelector('.vision-subdiv1-heading').textContent = '50%';
  document.querySelector('.vision-subdiv2-heading').textContent = '14%';
  document.querySelector('.vision-subdiv3-heading').textContent = '30%';
  // 可额外移除animation相关样式避免潜在报错
}

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