Firefox不执行@keyframes动画大概率是漏写@-moz-keyframes前缀；需成对声明标准版与前缀版关键帧，动画属性也须双写，且避免在@keyframes中使用CSS变量、连字符命名或transition: all等不兼容写法。
Firefox不执行@keyframes动画，但Chrome正常
大概率是漏写了@-moz-keyframes前缀。Firefox（Gecko引擎）对标准@keyframes的兼容性比Chrome（Blink）更严格，尤其在旧版本中，未加前缀的规则会被直接忽略。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须成对声明：
@keyframes slideIn和@-moz-keyframes slideIn，内容完全一致 - 动画属性也需双写：
animation: slideIn 0.3s;+-moz-animation: slideIn 0.3s; - 避免在
@keyframes内使用CSS变量（如var(--color)），Firefox 91之前不支持 - 检查
@keyframes名称：不能含连字符（fade-in会静默失败），推荐用下划线（fade_in）或驼峰（fadeIn）
Safari动画生效但Firefox卡顿，Chrome却流畅
不是代码写错，而是Firefox对GPU加速触发更保守——它不会仅凭transform: translateX(10px)就启用硬件合成，容易回退到CPU渲染导致掉帧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
transform: translateZ(0)换成transform: translate3d(0, 0, 0)，Firefox对后者识别更稳 - 慎用
will-change: transform：只在动画开始前1帧通过JS设置，结束后立刻设为auto，否则持续占用纹理内存 - 移除动画元素或其父级上的
display: contents，该属性会破坏盒模型，干扰Firefox的帧计算 - 禁用
backface-visibility: hidden（尤其在iOS Safari+Firefox混合场景下），它可能引发闪烁而非提升性能
Chrome里transition: all能动，Firefox/Safari却没反应
transition: all在各浏览器中实际涵盖的属性范围不同，Firefox默认不为transform或opacity启用过渡，Safari则可能忽略未显式声明的属性。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 永远不要用
transition: all，明确列出目标属性：transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) - 缓动函数别用
ease-in-out这类关键字，IE/Edge Legacy和部分Firefox版本会降级为ease；统一用cubic-bezier()显式声明 - 如果涉及
height过渡，height: auto不可动画，改用max-height或JS控制scrollHeight
3D翻页动画在Chrome向上翻、Firefox向下凹
这是rotate3d(0, 1, 0, -180deg)的数学歧义问题：-180deg与180deg视觉等效，但浏览器插值路径选择不同。Chrome倾向顺时针，Firefox可能选逆时针，造成翻转方向相反。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把终点角度从
-180deg微调为-179deg或179deg，消除临界点歧义 - 确保
perspective和transform-style: preserve-3d同时存在且作用于正确父容器 - 避免在同一个
transform声明里混用多个3D函数（如rotateY()+scale3d()），拆成独立关键帧更可控
