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 功能，看看它是否在您想要支持的所有浏览器中都受支持。