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>

I have created a file in code sandbox https://codesandbox.io/s/example-ry3kz?file=/src/components/App.jsx it is a react file, can u work with a react file? — Ninad Walanj, Aug 30 '21 at 18:40

score 2 · Answer 1 · edited Oct 15 '21 at 11:11

2

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.

edited Oct 15 '21 at 11:11

Dharman

30,962
25
85
135

answered Aug 31 '21 at 14:10

Arpit

316
1
9

Thank you for your response. Do you have any alternate for @property for firefox and safari? – Ninad Walanj Sep 01 '21 at 06:04
I don't think there is an alternate for `@property` as it is a new feature but I think you can use more widely used ways of animating numbers, here's a great [answer](https://stackoverflow.com/a/16994725/13901135) or you can use [css-tricks blog](https://css-tricks.com/animating-number-counters/) on animating numbers. – Arpit Sep 02 '21 at 17:19

CSS animation works in chrome but not in firefox and Safari

1 Answers1