firefox中transition延迟时间为0时必须带单位（如0s），否则整条声明被判定无效而静默失效；不可过渡属性、值未真实变化或硬件加速未启用也会导致过渡不触发。
transition延迟时间为0时必须带单位
Firefox对transition语法解析更严格，当delay为0却没写单位时，整条声明会被判为无效——开发者工具里该行直接划掉，动画完全不触发。这不是“不支持”，而是静默失效。
- 错误写法：
transition: background-color 0.3s ease 0;（Chrome能容错，Firefox不行） - 正确写法：
transition: background-color 0.3s ease 0s;或transition: background-color 0.3s ease 0ms; - 只对
delay为0时敏感；duration为0也建议写0s，但非强制
避免用不可过渡属性或无效变化触发
Firefox不会帮你“猜意图”，它严格按规范执行：不可过渡的属性、值未真实变化、或元素被移出渲染树，都会导致过渡跳过——不是卡顿，是根本没启动。
-
display: none → block永远不触发transition，改用opacity+visibility或max-height -
height: auto无法过渡，浏览器算不出终点；用max-height: 0 → max-height: 500px替代 - JS切换class后，用
getComputedStyle(el).color确认值真变了，别被CSS层叠覆盖骗了
硬件加速没生效导致掉帧
Firefox对transform启用GPU加速的条件比Chrome更苛刻，仅写translateX可能仍走CPU渲染，动画就卡。关键不是加前缀，而是让合成器真正接管。
- 优先用
transform: translate3d(0, 0, 0)，比translateZ(0)在Firefox中更稳 -
will-change: transform要慎用：动画开始前1帧设，结束立即设回auto，否则内存泄漏 - 绝对不要在动画中改
top/left/width等触发布局的属性，只动transform和opacity
颜色或3D旋转出现跳变/色差
不是bug，是Firefox和Chrome对插值路径、色彩空间的解释不同。尤其在边界值附近，细微写法差异会放大表现差距。
- 渐变色过渡色差：确保起止色都在sRGB空间，避免HEX与RGB混用；
linear-gradient(to right, #FF6B6B, #4ECDC4)在Firefox里插值路径可能偏移，可尝试转成rgb()统一空间 - 180度翻转跳变：把
rotateY(180deg)微调为rotateY(179deg)或rotateY(-179deg)，避开路径歧义 - 卡片翻转卡顿：
perspective必须加在父容器上，不是翻转元素本身；backface-visibility: hidden和transform-origin: center缺一不可
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
