Safari中transition无动画主因是过渡上下文未预先建立：transition声明须在初始渲染前存在且起始值必须显式声明（如opacity: 0），禁用display/auto等不可插值属性，旧版必须严格按顺序双写-webkit-transition与transition。
为什么Safari里transition写对了却没动画
根本不是CSS语法错，而是Safari（尤其15.4以下）对transition的初始化更苛刻：它要求transition声明必须在元素首次渲染前就存在，且起始值必须是明确数字或可插值状态。常见现象是元素“啪”一下跳到终态，Computed面板里transition-property显示none，或者transition-duration被忽略为0s。
- 只写
.item { transition: opacity 0.3s; }但没写opacity: 0;→ Safari取默认opacity: 1，变化量为0，不触发 -
transition写在:hover或.active类里，而非基础选择器 → 切换时过渡上下文丢失 - 用了
transition: all 0.3s→ Safari遇到不可过渡属性（如background-position）直接整条声明失效 - 父元素有
transform: translateZ(0)或will-change: transform→ 某些Safari版本会意外禁用子元素transition
必须加-webkit-transition且顺序不能错
Safari 15及更早版本只认-webkit-transition，现代浏览器又只读标准transition。两者必须共存，且顺序严格：前缀版必须在前，参数完全一致，否则任一端失效。
- ✅ 正确：
-webkit-transition: opacity 0.3s ease; transition: opacity 0.3s ease; - ❌ 错误：
transition: opacity 0.3s ease; -webkit-transition: opacity 0.3s ease;（Safari忽略后半段） - ❌ 错误：
-webkit-transition: all 0.3s; transition: opacity 0.3s;（属性不一致，WebKit内核丢弃整条） - 不用写
-moz-transition或-o-transition，Firefox 16+、Opera 12.1+已支持标准版
动态添加元素时transition仍不生效？检查三个硬条件
JS创建元素后调用el.classList.add("show")，Safari大概率静默失败——这不是bug，是渲染流水线差异。必须同时满足：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
- 基础类（如
.fade）已提前挂载，且含opacity: 0和transition声明 - 元素插入DOM前，已通过
el.className = "fade"或el.classList.add("fade")设好基础类 - 避免先
appendChild()再classList.add("show")；若必须后加，用void el.offsetWidth强制重排，而不是requestAnimationFrame（后者在低帧率iOS设备上可能延迟过长） - Vue/React中动态append的节点若带scoped样式，需用
:deep(.fade)穿透，否则data-v-xxxx缺失导致CSS不匹配
哪些属性在Safari里根本不能过渡
别信“所有属性都能动”。Safari对可动画属性限制更严，尤其涉及布局计算的值：
立即学习“前端免费学习笔记（深入）”；
-
height: auto→ 永远无法过渡，改用max-height: 0→max-height: 500px -
display: none↔block→ 不可动画，必须配opacity: 0+visibility: hidden -
background-size: cover→ Safari 15.4以下不支持，改用像素值如background-size: 100% 100% -
clip-path→ Safari 15.4+才支持过渡，旧版直接忽略 -
filter: drop-shadow()→ Safari 13.1+才支持，之前版本请降级为box-shadow
最常被忽略的是：transition声明必须长期存在，不能随状态开关而消失；起始值必须显式写出，不能依赖默认或继承；Safari不给你试错机会——它看到起点缺失，就直接跳过整个过渡流程。
