Safari中transition不生效的根本原因是其对可动画属性、合成层管理、前缀顺序和触发时机要求更严格。典型问题包括漏写或后置-webkit-transition、使用不可插值属性（如display:none、height:auto）、未用translateZ(0)+backface-visibility:hidden稳定图层、border-radius+overflow+transition组合裁剪失效，以及transition-delay:0s被跳过等。
根本原因不是“Safari不支持transition”，而是它对可动画属性、合成层管理、前缀规则和触发时机的要求比其他浏览器更严格——稍有偏差就静默失效或视觉闪烁。
transition在Safari中不生效的典型场景
常见错误现象包括：加了transition但元素一动就跳变、hover时没过渡、JS切换class后动画直接卡住。这往往不是CSS写错了，而是以下任一条件没满足：
-
transition声明只写在@media块里，常态下无该规则，起点不存在就无法插值 - 用了
display: none、height: auto、background-size: cover等Safari明确不支持插值的值 - 漏写
-webkit-transition，或把它写在标准transition之后（必须前置） - 过渡属性是
left/top/width，但没配套transform: translateZ(0)或will-change: transform
为什么transform/opacity在Safari上也闪？
即使用了transform和opacity，iOS Safari（尤其是15.4–16.6）仍可能闪烁，因为图层未稳定。WebKit默认不为每个动画元素单独建合成层，帧间反复销毁重建会导致白边、文字抖动。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 必须在**动画元素自身**加
transform: translateZ(0); backface-visibility: hidden;，顺序不能颠倒 - 父容器设
will-change对子元素无效，且will-change滥用会拖慢首屏 - 真机测试不可替代：桌面Safari的Layers面板显示成层，不等于iPhone上也成层
- 避免同时用
filter或backdrop-filter，它们在iOS WebView中可能强制降级CPU渲染
border-radius + overflow: hidden + transition组合失效
Safari在transition过程中会松动裁剪边界，导致圆角外内容短暂溢出——这不是bug，是WebKit对overflow和border-radius协同更新的保守策略。
立即学习“前端免费学习笔记（深入）”；
- 不能依赖
overflow: hidden做动态裁剪，必须用-webkit-mask补位 - 推荐写法：
-webkit-mask: radial-gradient(circle at center, #000 0%, #000 100%); mask-size: 100% 100%; - 若用
transform: scale()动画，父容器需同步加will-change: transform，否则裁剪更易脱钩 - 慎用
clip-path替代：它在Safari 15.4+才支持过渡，旧版直接忽略
最常被忽略的点是：Safari对“可动画属性”的判断比Chrome更严，且对transition触发时机更敏感——比如transition-delay: 0s在某些版本会被跳过，得改成0.01s并配合requestAnimationFrame确保样式已计算完毕。
