为什么CSS动画在Chrome正常但Firefox卡顿？

Firefox对transition delay为0要求强制单位，display: contents会破坏动画渲染树，rotateY(180deg)存在插值路径歧义，硬件加速需满足perspective、backface-visibility等完整条件。

Firefox对transition delay为0的单位校验更严格

Chrome会容错处理transition: background-color 0.3s ease 0，但Firefox直接判整条声明无效——开发者工具里该行被划掉，动画完全不触发。这不是“不支持”，是静默失效。

1. 必须写成transition: background-color 0.3s ease 0s或transition: background-color 0.3s ease 0ms
2. 仅delay为0时强制要求单位；duration为0也建议写0s，但非必须
3. 检查所有transition声明，尤其JS动态注入的样式，容易漏掉单位

display: contents;会破坏Firefox的动画渲染树

当动画目标元素（比如.wrapper span）设置了display: contents;，它在渲染树中几乎“消失”，Firefox无法为其建立独立合成层，导致动画卡顿甚至跳帧。

1. 移除该属性是最直接有效的修复方式
2. 若必须用display: contents;做布局，把动画逻辑移到其子元素或父容器上，避开该节点本身
3. 不要依赖Chrome/Safari“能跑通”就认为没问题——Firefox的渲染路径更保守，暴露的是真实问题

rotateY(180deg)在Firefox中路径选择歧义

从rotateY(0deg)到rotateY(180deg)，数学上等价于rotateY(-180deg)，但Firefox插值时可能选了反向路径，造成翻转方向异常或卡顿。

1. 把终点角度微调为rotateY(179deg)或rotateY(-179deg)，避开180度临界点
2. 确保perspective加在父容器上，不是翻转元素自身
3. backface-visibility: hidden和transform-origin: center缺一不可，否则Firefox合成失败

硬件加速没真正启用，只靠transform不够

写了transform: translateX(10px)不代表进了GPU合成层。Firefox比Chrome更苛刻：父容器overflow、兄弟元素状态、甚至JS里读取getBoundingClientRect()都可能阻断升层。

1. 动画前缓存所有尺寸，requestAnimationFrame里只写el.style.transform
2. 用DevTools Rendering面板勾选Show Compositing Borders，橙色边框才表示真走GPU
3. 慎用will-change: transform——在touchstart设，动画结束立刻设回auto；全局CSS写死会导致内存泄漏

Firefox里动画“卡”，往往不是性能差，是你写的代码刚好落在它那套严格校验的缝隙里：单位缺失、渲染树断裂、路径歧义、合成层未真正建立。这些点Chrome可能糊弄过去，但Firefox不会帮你猜。