safari中transition失效主因是未在常态声明、transform未显式指定或硬件加速缺失，需在常态写transition、加-webkit-transform:translatez(0)、避免auto值及background简写。
绝大多数情况下，Safari 中 transition 不生效不是代码写错了，而是它压根没“看到”可过渡的起点、没识别到变化、或根本拒绝动画那个属性。
transition 写在 :hover 里导致第一次无动画
这是最常被忽略的逻辑错误：浏览器需要在状态变化“之前”就持有 transition 声明，才能计算插值。如果只在 :hover 中写 transition: opacity 0.3s，那鼠标移入时属性突变，浏览器没有过渡上下文，直接跳到终态；移出时更惨——transition 声明已消失，连回退动画都没有。
- ✅ 正确写法：
.btn { opacity: 1; transition: opacity 0.3s; }+.btn:hover { opacity: 0.7; } - ❌ 错误写法：
.btn { opacity: 1; }+.btn:hover { opacity: 0.7; transition: opacity 0.3s; } - 用 DevTools 的 Computed 面板确认
transition-property在常态和悬停时都存在，且值不是none
transform 过渡失效：被覆盖、没声明、或 Safari 拒绝合成
Safari 对 transform 过渡异常敏感——它不光要看你写了没，还要看这个值是否“干净”、是否被其他规则干扰、是否触发了 GPU 合成层。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
transform必须显式写进transition-property，不能依赖all；推荐写成transition: transform 0.3s, opacity 0.3s - 检查 Elements → Styles 面板中，目标元素的
transform计算值是否真的在 hover/JS 切换时发生变化；若始终显示none，说明被更高优先级规则（如 Normalize.css 或框架重置）覆盖了 - 在 iOS/macOS Safari 上，加
-webkit-transform: translateZ(0)是必须的，且要和transition写在同一 CSS 规则块里，否则 Safari 可能不启用硬件加速，导致卡顿或动画丢帧
border-radius + overflow: hidden + transition 组合溢出
这不是 transition 失效，而是 Safari 渲染机制缺陷：过渡过程中 overflow: hidden 对圆角的裁剪会“松动”，子元素内容短暂冲破边界，看起来像动画崩了。
- 别指望
overflow: hidden和border-radius在 transition 中稳定共存 - 替代方案是用
-webkit-mask强制遮罩：-webkit-mask: radial-gradient(circle at center, #000 0%, #000 12px, transparent 12px); mask-size: 100% 100%; - 如果用
transform: scale()动画，务必给父容器加will-change: transform，否则 Safari 可能跳过合成层，加剧裁剪脱钩
值不可插值或属性不支持：auto、display、background 简写
Safari 比 Chrome 更严格地执行“可动画属性”清单，尤其对涉及布局重排的属性几乎零容忍。
-
height: auto、width: fit-content、margin: 0 auto—— 全部无法插值，改用max-height或transform: scaleY()+overflow: hidden -
background简写（含渐变）在 Safari 中常 fallback 成无动画；拆成background-color单独过渡更可靠 -
clip-path需 Safari 15.4+，drop-shadow()需 Safari 13.1+；旧版本直接忽略，降级用box-shadow -
transition-delay: 0s在 Safari 中可能被跳过，改用0.01s并配合requestAnimationFrame确保触发时机
真正棘手的从来不是“怎么写 transition”，而是 Safari 怎么“读”它——它不接受模糊定义、不兼容隐式继承、不渲染不可合成的变化。动手前先打开 DevTools 的 Computed 面板，盯着 transition-property、transform、opacity 的实时计算值看两秒，比查十篇教程都管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
