Firefox CSS 动画
Posted
技术标签:
【中文标题】Firefox CSS 动画【英文标题】：Firefox css animations 【发布时间】：2020-04-01 19:01:11 【问题描述】：我有移动视图动画，它在 Chrome 移动设备上完美运行，但在 Firefox 上，元素定位结果很差。在 Opera 和 Safari 中运行良好。
<div
class="fptext">text/text
Text/text</div>
<div
class="fatext">text/text/
text/txt</div>
CSS 动画：
@media (max-width: 768px).
.fptext animation: fadeout
50s ease forwards;animation.
delay: 0s;padding:0px;
@keyframes fadeout
from font-size: 0px to
font-size: 40px;
@media(max-width: 768px).
.fatextanimation: bigger
50s ease forwards;animation.
delay: 0s;;
position:relative;font-size:
15px; color:#43ff0a;bottom:
1700px; font-
weight:bolder;padding:
0px;background
color:blue;display:block
;margin-bottom: -1750px
@keyframes bigger
fromfont-size: 0px to
font-size: 18px;
见手机here
【问题讨论】：
我猜你的手机是基于安卓的吧？ 是的...... 但它在苹果手机和 safari 上运行良好 “Result is way off”不是问题的技术描述。 CSS 验证器将第 5 行和第 22 行标记为解析错误。 【参考方案1】：我在我的浏览器上检查了你的代码，当我遇到跨浏览器问题时，我会根据我的需要从规范化或重置开始，当我检查时我没有看到任何一个，所以你可能会通过添加规范化看到改进.css 到您的项目。您还担心美国市场份额为 0.62% 的问题，因此只有不到 1% 的人使用它。
【讨论】：
谢谢。我会把它放在我的主题header.php 或 <head>normalize.css</head> 个别页面上吗？
如果你是用 php 动态地带上头部然后把这个 放在那里或者把它放在你的头上，只要它加载到页面，然后只需制作您的 normalize.css 并从 github.com/necolas/normalize.css/blob/master/normalize.css 复制它以上是关于Firefox CSS 动画的主要内容，如果未能解决你的问题，请参考以下文章
Firefox 中的 jQuery 和 CSS 动画 Choppy