safari中transition失效最常见原因是未在基础样式中声明，而放在:hover等伪类里；border-radius与overflow:hidden在动画中协同异常；background简写会破坏颜色过渡；touch事件需手动触发合成层。
transition写对了但Safari里完全没动画
最常见原因是 transition 声明没落在基础样式里，而是被塞进了 :hover 或其他伪类中。Safari 会严格按规则存在与否来决定是否启用过渡上下文——一旦鼠标移出，:hover 规则失效，transition 就彻底消失，导致“只进不出”或干脆全无动画。
必须把 transition 写在常态选择器里，比如：
.btn {
opacity: 1;
transition: opacity 0.2s ease; /* ✅ 这里 */
}
.btn:hover {
opacity: 0.7; /* ❌ 不在这里写 transition */
}
- 用 DevTools 的 Computed 面板检查
transition-property是否始终存在，而不是只在:hover激活时才出现 - 别信“看起来写了就行”，Safari 对声明生命周期比 Chrome 更敏感
- 如果用 JS 切换 class，确保
transition所在的类永远不会被remove()
Safari 中 border-radius + overflow: hidden + transition 溢出
这不是过渡“没效果”，而是裁剪逻辑在动画过程中松动：圆角容器内部元素（比如图片、文字）在缩放或位移时，会短暂突破 overflow: hidden 边界，露出尖角或背景色。
根本原因是 WebKit 渲染管线在启用 transition 时，对 border-radius 和 overflow 的协同处理不一致，尤其在 macOS 14+/iOS 17+ 上复现率极高。
- 临时解法：给父容器加
-webkit-mask，用 radial-gradient 模拟圆角遮罩 - 必须设
mask-size: 100% 100%，否则缩放失真 - 配合
will-change: transform强制硬件加速，避免 Safari 跳过合成层 - 别依赖
overflow: hidden做视觉裁剪——它在 Safari 的过渡中不可靠
background-color 或渐变在过渡中突变而非平滑
Safari 对 background 简写属性（含 background-image: linear-gradient()）的过渡支持极弱，常直接 fallback 成瞬时切换，尤其在旧版 iOS 或启用了深色模式的设备上。
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
哪怕你写了 transition: background-color 0.3s，只要 CSS 里某处用了 background: #fff url(...) no-repeat 这类简写，就可能覆盖掉单独的 background-color 过渡声明。
- 把
background-color单独拎出来写，并确保没有其他规则用background简写覆盖它 - 渐变过渡基本不可靠，改用 solid color +
opacity或transform组合模拟层次感 - 用 Computed 面板确认最终生效的
background-color值是明确的十六进制或 rgb()，不是transparent或initial
移动端 Safari 触发不了 transition，尤其 touch 场景
不是代码错，而是 Safari 默认不把 touch 事件（如 touchstart）当作视觉状态变更的触发信号，导致 class 切换后过渡不启动，直到下一次重排（比如 resize 或 scroll）才“醒过来”。
更隐蔽的是：某些安卓 WebView 也继承了这个行为，但表现不如 Safari 明显，容易误判为兼容性问题。
- 在绑定交互的 JS 里，手动触发一次
el.style.transform = 'translateZ(0)'，强制创建合成层并唤醒过渡引擎 - 用
touchstart替代click，并在事件回调开头加requestAnimationFrame确保样式已计算 - 避免在
transition中混用width/height—— 它们在低端 iOS 设备上极易掉帧甚至跳变 - 过渡时长建议 ≤ 0.2s，超过 0.3s 在部分 iPad 上会出现明显卡顿
真正难的不是让 Safari 动起来，而是判断哪条规则在它眼里“不算数”：transition 必须持续在线、属性值必须显式可读、裁剪不能靠 overflow、颜色不能靠简写——漏掉任意一环，它就静默失败，连 warning 都不报。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
