safari中transition不生效的主因是缺失-webkit前缀、使用不可插值属性（如display/auto）、简写语法兼容性差、可动画属性限制更严（如background-size的cover/contain）、clip-path需safari 15.4+、filter中drop-shadow()需safari 13.1+，且transition-delay为0s易被跳过，应改用0.01s并配合requestanimationframe确保触发时机。
transition 属性在 Safari 上不生效的常见原因
不是所有 CSS transition 写法都能在 Safari（尤其是旧版）上跑通，最常踩的坑是漏掉 -webkit-transition 前缀，或者用了 Safari 不支持的过渡值类型。
- Safari 12 及更早版本对
transition的简写语法容忍度低，比如transition: all 0.3s ease;容易失效，建议拆成transition-property+transition-duration显式声明 - 用
transition动画display、height（从0到auto）这类不可插值属性时，Safari 表现比 Chrome 更严格，基本不会动 - 如果父元素有
transform: translateZ(0)或will-change: transform，某些 Safari 版本会意外禁用子元素的transition，可临时去掉验证
哪些 transition-property 值在 Safari 中需要特别注意
不是所有 CSS 属性都支持过渡，Safari 对「可动画属性」的判断更保守，尤其涉及布局或重排的属性。
-
width、height、margin、padding可以过渡，但必须是具体数值（如100px），不能是auto或fit-content -
background-position在 Safari 中支持，但background-size的cover/contain值无法过渡，只能过渡像素或百分比值 -
clip-path在 Safari 15.4+ 才支持过渡，旧版直接忽略；若需兼容，得用opacity+transform替代视觉效果 -
filter支持，但drop-shadow()在 Safari 13.1 之前不支持过渡，建议降级为box-shadow
如何安全地为 transition 添加 -webkit 前缀
现代构建工具（如 PostCSS Autoprefixer）通常能自动补全，但手动写或调试时容易漏掉关键项。
- 只加
-webkit-transition不够：必须同步加-webkit-transition-property、-webkit-transition-duration等对应前缀，否则 Safari 可能读取不一致 - 不要混用简写和长写：比如同时写
transition: opacity 0.2s;和-webkit-transition-property: opacity;，Safari 可能只认前缀版，导致简写被覆盖 - 推荐写法是「双写 + 后置标准版」：
-webkit-transition: opacity 0.2s ease; transition: opacity 0.2s ease;
且避免在同一个规则里穿插前缀与非前缀的子属性
transition-delay 在 Safari 中的计时偏差问题
Safari 对 transition-delay 的触发时机更依赖渲染帧节奏，尤其在页面刚加载或 tab 切换后，容易出现延迟未生效或跳过。
立即学习“前端免费学习笔记（深入）”；
- 如果
transition-delay设为0s或0ms，Safari 有时会直接跳过过渡，改用0.01s更稳妥 - 动态添加 class 触发 transition 时，Safari 要求样式已计算完毕，常见解法是在
setTimeout中延迟一帧：element.classList.add('is-active'); setTimeout(() => { element.classList.add('animate'); }, 0); - 使用
requestAnimationFrame比setTimeout更可靠，但要注意它不保证在下一帧立即执行，仅比setTimeout(0)更贴近渲染时机
