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

Posted 2023-03-06

【中文标题】CSS 动画在 chrome 中有效，但在 Firefox 和 Safari 中无效

【英文标题】：CSS animation works in chrome but not in firefox and Safari

【发布时间】：2021-10-29 10:38:27

【问题描述】：

我在 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>

【问题讨论】：

你能把你的例子放在 jsfiddle 或 codepen 中吗？

我在代码沙箱codesandbox.io/s/example-ry3kz?file=/src/components/App.jsx创建了一个文件，它是一个react文件，你可以使用react文件吗？

【参考方案1】：

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

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

【讨论】：

感谢您的回复。你有任何替代 @property for firefox 和 safari 的吗？

我认为@property 没有替代品，因为它是一项新功能，但我认为您可以使用更广泛使用的数字动画方式，这是一个很棒的answer 或者您可以在动画数字上使用css-tricks blog。