旧版 safari 必须将 -webkit-transition 写在标准 transition 前且参数完全一致，推荐显式声明 transition-property 和 duration；height: auto、background-size: cover 等属性不支持过渡；transition-delay: 0s 需改为 0.01s 规避渲染 bug。
旧版 Safari 必须加 -webkit-transition，且顺序不能错
2026 年当前，Safari 15.4+ 已全面支持标准 transition，但若需兼容 iOS ≤ 9.3、macOS Safari ≤ 9（2016 年前）、或某些嵌入式 WebView（如旧版 Cordova/React Native），-webkit-transition 仍是硬性要求。关键不是“要不要加”，而是“怎么加才不翻车”：
- 必须把
-webkit-transition写在标准transition前面，否则旧 Safari 直接忽略整条声明 - 两者的参数必须完全一致：属性名、时长、timing-function、delay 都得对齐，不能一个写
all、一个写具体属性 - 旧 Safari（尤其 ≤ 9.3）对简写语法容忍度极低，
transition: all 0.3s ease;容易失效，建议拆成transition-property+transition-duration显式声明
transition-property 在 Safari 中的坑比 Chrome 多
旧版 Safari 对“哪些属性能过渡”判断更严格，很多在 Chrome 里能动的，在 Safari 里直接静止：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
height: auto或width: fit-content—— Safari 无法插值，必须用固定 px 值或max-height模拟 -
background-size: cover—— 不可过渡，只能过渡具体数值如100% 100%或200px 100px -
clip-path—— Safari 15.4 才开始支持过渡，旧版直接忽略，得用opacity+transform替代 -
display—— 任何版本 Safari 都不支持，改用visibility+opacity或max-height+overflow
触发失败？先查是否卡在 transition-delay: 0s
旧版 Safari（特别是 iOS 9.3 及更早）对 transition-delay: 0s 解析不稳定，动画常被跳过。这不是 CSS 写错了，是渲染引擎的 timing bug：
- 把
transition-delay: 0s改成transition-delay: 0.01s，几乎总能修复 - 如果靠 JS 动态添加 class 触发，记得在
setTimeout(() => {}, 0)或requestAnimationFrame里执行，避免样式计算被合并 - 父元素有
transform: translateZ(0)或will-change: transform时，某些 Safari 版本会意外禁用子元素transition，临时移除可验证
现代项目里要不要手动加前缀？看真实用户数据
autoprefixer 默认已不生成 -webkit-transition，因为 Chrome 63+、Firefox 63+、Safari 12.1+、Edge 79+ 全部原生支持。是否手补前缀，取决于你是否真有老设备用户：
- 如果统计后台显示 iOS ≤ 9.3 占比
- 若必须支持，只补
-webkit-transition就够，-moz-、-o-、-ms-在 transition 上已无实际意义 - 注意：IE10 支持标准
transition，但 IE9 及更早版本完全不支持，加前缀也无效，别白费功夫
background-position 从 0 0 到 100% 100% 在 Safari 9 里也可能不动——这时候得换思路，用 transform 模拟位移。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
