如何修复Safari中CSS transition不触发的问题？-css教程-PHP中文网

safari中transition无动画主因是过渡上下文未预先建立：transition声明须在初始渲染前存在且起始值必须显式声明（如opacity: 0），禁用display/auto等不可插值属性，旧版必须严格按顺序双写-webkit-transition与transition。

如何修复safari中css 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不匹配