Firefox中transition异常主因是语法严格性与渲染差异：延迟时间为0时必须带单位（如0s），不可过渡属性（如display）或值未真实变化会导致静默失效，颜色渐变需统一sRGB空间，180度旋转应微调避免路径歧义。
Firefox 中 transition 表现异常，通常不是“不支持”，而是触发条件、解析规则或渲染路径和 Chrome/Safari 存在细微差异。多数问题可通过调整写法、规避临界值、统一颜色空间或修正触发逻辑解决，而非加前缀或降级。
transition 末尾时间值必须带单位（如 0s 而非 0）
Firefox 对 transition 的语法解析比其他浏览器更严格：当延迟时间为 0 时，若未显式声明单位（如 s 或 ms），整个声明会被视为无效，开发者工具中该行会被划掉（invalid），动画完全不触发。
常见错误现象：transition: background-color 0.3s ease 0; 在 Chrome 正常，在 Firefox 静默失效。
- 必须写成
transition: background-color 0.3s ease 0s;或transition: background-color 0.3s ease 0ms; - 这个规则适用于所有四个参数（property、duration、timing-function、delay），但只有 delay 为
0时最容易踩坑 - 现代项目无需写
-moz-transition，Firefox 63+ 完全支持标准语法，加前缀反而可能引发冗余解析
transition 不触发的真正原因：属性不可过渡或值未真实变化
Firefox 和 Chrome 对“什么算变化”的判断逻辑一致，但更容易暴露你代码里本就存在的触发漏洞——比如 CSS 层叠覆盖、JS 设置重复值、或用了不可过渡属性。
立即学习“前端免费学习笔记（深入）”；
使用场景中高频出错点：
-
display: none → block永远不会触发transition（规范行为），Firefox 不会延迟一帧去“尝试”，而是直接跳过；改用opacity+visibility或max-height -
height: auto无法过渡（浏览器无法计算终点值），Firefox 尤其敏感；可用max-height: 0→max-height: 500px模拟 - JS 中通过
el.classList.toggle('active')切换，但对应 CSS 中.active的color值和默认值相同（如都是#333），则无变化，无过渡——用getComputedStyle(el).color在控制台确认实际值
颜色渐变过渡在 Firefox 中色差/跳变
同一段 linear-gradient(to right, #FF6B6B, #4ECDC4)，在 Firefox 和 Chrome 里插值路径不同，不是 bug，而是色彩空间解释不一致导致的物理色偏差。
根本原因：
- Chrome v110+ 把无声明的 HEX 当作
color(srgb)处理 - Firefox 某些版本对 gamma 校正有微小差异
- Safari（尤其 macOS 广色域模式）可能把 HEX 解释为 Display P3
解决方案：强制锚定 sRGB 空间
- 把
#FF6B6B改成rgb(255 107 107)（推荐空格分隔现代语法）或rgb(255, 107, 107)（兼容旧版） - 确保整条渐变中所有颜色格式统一，不要混用 HEX 和
rgb()，否则 Firefox 可能跳变 - 避免用
@supports (background: linear-gradient())做降级判断——它只检测语法支持，不检测色彩空间一致性
3D 动画中 rotate3d(-180deg) 在 Firefox 路径异常
当 transform 动画终点是精确的 -180deg 或 180deg 时，Firefox 渲染引擎可能选择与 Chrome 不同的旋转路径（例如“向下凹陷”而非“向上翻页”），这不是性能问题，而是插值方向歧义。
实操建议：
- 将关键帧中的
rotate3d(0, 1, 0, -180deg)微调为rotate3d(0, 1, 0, -179deg)或rotate3d(0, 1, 0, 179deg) - 这个 1 度偏移足以消除数学上的对称歧义，让所有浏览器选择同一最短路径
- 不要用
will-change: transform强制优化——Firefox 可能因此持续占用纹理内存，反而卡顿；优先用transform: translate3d(0, 0, 0)
Firefox 的 transition 兼容性问题，绝大多数藏在“看似正常”的细节里：单位缺失、颜色空间隐式推断、180 度旋转的数学临界点、或你以为变了其实没变的属性值。它不报错，只是静默跳过——这恰恰是最难调试的部分。
