transition必须写在常态规则中，否则悬停时无过渡；需显式声明transform并加-webkit-transform: translatez(0)触发硬件加速；避免不可插值属性和简写；旧版safari需双写前缀且-webkit版在前。
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 对transform过渡异常敏感：它不光要看你写了没，还要看这个值是否“干净”、是否被其他规则覆盖、是否触发了 GPU 合成层。仅写transition: all或漏掉transform在transition-property里，大概率失效。
- 必须显式写进
transition，例如：transition: transform 0.3s, opacity 0.3s，别依赖all - 在同一个 CSS 规则块里加
-webkit-transform: translateZ(0)，否则 Safari 可能不启用硬件加速，导致卡顿或丢帧 - 检查 Elements → Styles 面板中，目标元素的
transform计算值是否真在 hover/JS 切换时发生变化；若始终显示none，说明被更高优先级规则（如 Normalize.css）覆盖了
避免使用不可插值的值和简写属性
Safari 对不可动画属性或不可插值的值更严格，比如auto、cover、contain、display，甚至background简写都会导致整条transition静默失效。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
height: auto无法过渡，改用max-height或transform: scaleY() -
background-size: cover不支持插值，只能过渡具体像素或百分比，如background-size: 100% 100% - 别用
transition: all 0.3s，拆成明确属性：transition: opacity 0.3s, transform 0.3s -
background简写会干扰过渡，改用单独的background-color或background-image
旧版 Safari 需要 -webkit- 前缀且顺序不能错
尽管现代 Safari（≥16.4）已支持无前缀transition，但 iOS 15 及更早、部分 WebView 场景仍需双写。而且顺序错了就白写——WebKit 浏览器只认第一行带前缀的声明。
- 必须同时写两行，且
-webkit-transition在前：-webkit-transition: opacity 0.3s, transform 0.3s;+transition: opacity 0.3s, transform 0.3s; - 前缀版和标准版的参数必须完全一致，不能一个写
all、一个写具体属性 -
transition-delay: 0s在某些 Safari 版本中会被跳过，可改用0.01s并配合requestAnimationFrame确保触发
Safari 的 transition 失效很少是语法错误，多数时候是它压根没“看到”起点、没识别到变化、或拒绝合成那个属性。最易忽略的是：transition必须持续存在，且变化必须发生在已声明该过渡的状态下。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
