簡體   English   中英

CSS 動畫在 chrome 中有效,但在 Firefox 和 Safari 中無效

[英]CSS animation works in chrome but not in firefox and Safari

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

問題的原因很簡單, @property在 Firefox 或 Safari 瀏覽器上不受支持,但在 Chrome 上受支持,因此您會看到您的動畫在 Chrome 上運行,但在 Safari 或 Firefox 上不起作用。 這里是caniuse頁面上澄清瀏覽器@property作品。

我建議在caniuse上檢查任何新的 CSS 功能,看看它是否在您想要支持的所有瀏覽器中都受支持。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM