CSS 动画在 chrome 中有效，但在 Firefox 和 Safari 中无效

Question

我在 Firefox 和 safari 中遇到了这个动画问题。动画在 chrome 中工作。 我尝试使用 -Moz- 和 -WebKit- 供应商前缀，但 firefox 和 safari 已经支持动画。

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;
}

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

.vision-subdiv1-span {
  position: absolute;
  left: 12.5rem;
}

.vision-subdiv2-span {
  position: absolute;
  left: 12.5rem;
}

.vision-subdiv3-span {
  position: absolute;
  left: 12.5rem;
}

.vision-subdiv1-heading {
  animation: counter1 4s 1 forwards linear;
  counter-reset: num var(--num);
  font-size: 2.8rem;
  font-weight: bold;
  position: relative;
  left: -1rem;
}

.vision-subdiv1-heading::after {
  content: counter(num);
}

.vision-subdiv2-heading {
  animation: counter2 4s 1 forwards linear;
  counter-reset: num var(--num);
  font-size: 2.8rem;
  font-weight: bold;
  position: relative;
  left: -1rem;
}

.vision-subdiv2-heading::after {
  content: counter(num);
}

.vision-subdiv3-heading {
  animation: counter3 4s 1 forwards linear;
  counter-reset: num var(--num);
  font-size: 2.8rem;
  font-weight: bold;
  position: relative;
  left: -1rem;
}

.vision-subdiv3-heading::after {
  content: counter(num);
}

@keyframes counter1 {
  from {
    --num: 0;
  }
  to {
    --num: 50;
  }
}

@keyframes counter2 {
  from {
    --num: 0;
  }
  to {
    --num: 14;
  }
}

@keyframes counter3 {
  from {
    --num: 0;
  }
  to {
    --num: 30;
  }
}

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

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

.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;
}

HTML:

<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">
        <span className="vision-subdiv1-span">%</span>
      </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 ">
        <span className="vision-subdiv2-span">%</span>
      </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 ">
        <span className="vision-subdiv3-span">%</span>
      </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>

Answer 1

问题的原因很简单，@property 在 Firefox 或 Safari 浏览器上不受支持，但在 Chrome 上受支持，因此您看到动画在 Chrome 上运行，但在 Safari 或 Firefox 上不运行。这是caniuse 页面，它阐明了@property 在哪些浏览器上工作。

我建议检查 caniuse 上的任何新 CSS 功能，看看它是否在您想要支持的所有浏览器中都受支持。