CSS animation works in chrome but not in firefox and Safari

Question

I am facing this issue of animation in firefox and safari. Animation is working in chrome. I tried using -Moz- and -WebKit- vendor prefixes but firefox and safari already have support for animation.

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

The cause of the issue is simple, the @property is not supported on Firefox or Safari browsers but is supported on Chrome, so you are seeing your animation working on Chrome but not on Safari or Firefox. Here is the caniuse page that clarifies on which browsers the @property works.

I recommend checking any new CSS features on caniuse and see if it is supported in all the browsers that you want to support.