Firefox要求transition的delay为0时必须带单位（如0s），否则整条声明无效；Safari需前置-webkit-transition且属性值完全一致；二者均不触发display切换或height:auto等无效过渡。
Firefox 和 Safari 的 transition 不是“不兼容”，而是各自对规范的执行更较真——Firefox 卡在语法和触发逻辑，Safari 卡在前缀、GPU 启用时机和渲染树状态。
Firefox 要求 delay 为 0 时必须带单位
这是最常被忽略的静默失效点。Chrome 容错，Firefox 直接判整条 transition 声明无效（DevTools 里该行会被划掉）。
- 错误写法：
transition: opacity 0.3s ease 0;—— Firefox 完全不触发 - 正确写法：
transition: opacity 0.3s ease 0s;或transition: opacity 0.3s ease 0ms; - 只对
delay参数为 0 时强制；duration写0s更稳妥，但非必须
Safari 必须显式写 -webkit-transition 且顺序不能错
Safari（尤其 iOS WebView 和旧版 macOS Safari）只认前缀版，且必须放在标准版之前，否则忽略。
- 正确顺序：
-webkit-transition→-moz-transition（可选，仅需支持极老 Firefox）→transition - 所有版本的属性名、时长、timing function 必须完全一致，比如不能一个写
all，一个写opacity - 示例：
-webkit-transition: transform 0.25s ease, opacity 0.25s ease; transition: transform 0.25s ease, opacity 0.25s ease;
两者都拒绝不可过渡的属性或“假变化”
不是浏览器差异，是规范执行严格度暴露了你代码里的漏洞。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
立即学习“前端免费学习笔记（深入）”；
-
display: none → block：永远不触发，Firefox 更果断跳过；改用opacity: 0 → 1+visibility: hidden → visible -
height: auto：无法计算终点值，Firefox 尤其敏感；用max-height: 0 → 500px模拟（500px 设为足够大值） - JS 切换 class 后无动画？用
getComputedStyle(el).opacity确认值是否真变了，别被层叠覆盖或初始未声明骗了
transform 动画在 Safari/Firefox 中卡顿或跳变
根本不是帧率问题，而是 GPU 合成没真正启用，或插值路径歧义。
- Safari：加
-webkit-transform: translate3d(0, 0, 0)比translateZ(0)更稳；避免在动画中改top/left - Firefox：180° 旋转（如
rotateY(180deg)）易跳变，微调为rotateY(179deg)或rotateY(-179deg) - 渐变色过渡色差？统一用
rgb()写起止色，避开 HEX 与 RGB 混用导致的 sRGB 空间不一致
真正麻烦的从来不是“哪个浏览器不支持”，而是同一段 CSS 在 Firefox 里因单位缺失直接失效，在 Safari 里因前缀缺失彻底忽略，在两者里又可能因 display 切换或 height: auto 被当成无效变更——这些点不逐个验证，光靠 autoprefixer 或 reset.css 解决不了。
