CSS transition 在 Safari、旧版 Chrome 或 Android WebView 中不生效，根本原因是漏写或顺序错误的 -webkit-transition；必须先写 -webkit-transition，再写标准 transition，且属性、时长、函数须完全一致，否则WebKit内核浏览器忽略标准版、其他浏览器忽略前缀版。
CSS transition 在 Safari、旧版 Chrome 或 Android WebView 中不生效，基本就是漏了 -webkit-transition，而且顺序写反了。
为什么加前缀还失效？顺序和写法必须严格
WebKit 内核浏览器（Safari、iOS WebView、Chrome ≤ 25、Android Browser）只认 -webkit-transition，但现代 Firefox/Edge 又只认标准版 transition。所以不能只写前缀版，也不能把标准版放前面。
- 必须先写
-webkit-transition，再写-moz-transition（Firefox ≤ 15），最后写标准transition -
-o-transition（Opera）可省略，-ms-transition对 IE10+ 无效（IE10 支持标准版，但不支持all中部分属性如background-position） - 所有版本的属性名、时长、函数必须完全一致，比如
-webkit-transition: width 0.3s ease和transition: width 0.3s ease，不能一个写all一个写具体属性
transition 触发不了？先确认它真能动
transition 不是“加了就过渡”，它只响应可动画属性的**值变化**，且该变化必须由 CSS 规则触发（如 :hover、:focus）或 JS 切换 class 后实际生效。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
display、height: auto、font-size（某些旧版 Firefox）等不可过渡，改用opacity+visibility或max-height - JS 中用
el.classList.toggle('active')后，检查getComputedStyle(el).width是否真变了——CSS 层叠覆盖或初始值未定义常导致“看似变了实则没变” - 在 Safari 上，如果元素没触发 GPU 合成，
transform类过渡（如translateX）会卡顿甚至闪屏，需配套加-webkit-transform: translateZ(0)
transitionend 监听不到？事件名和冒泡都得兼容
不同浏览器触发的事件名不同，且 transitionend 会冒泡，容易误判来源。
立即学习“前端免费学习笔记（深入）”；
- 可用这段逻辑检测真实事件名：
const el = document.createElement('div'); const transitions = { 'transition': 'transitionend', 'OTransition': 'oTransitionEnd', 'MozTransition': 'transitionend', 'WebkitTransition': 'webkitTransitionEnd' }; for (const t in transitions) { if (el.style[t] !== undefined) { console.log('use', transitions[t]); } } - 监听时建议用
el.addEventListener('transitionend', handler, { once: true })，避免重复触发 - 不要依赖
event.propertyName判断哪个属性结束——IE10–11 和 Safari 有时返回空字符串或错误值
最易被忽略的是：Safari 里 transition 和 transform 必须写在同一规则块里，且 translateZ(0) 不能只加在父容器上——它得作用于正在动画的那个元素本身，否则 GPU 合成不生效。
