IE9及更早版本完全不支持transition，解析器直接忽略整个声明及所有子属性；必须改用JavaScript驱动动画，如requestAnimationFrame插值或max-height伪过渡。
IE9 及更早版本根本无法启用 transition
不是效果差、不是需要加前缀，而是解析器直接忽略整个 transition 声明，包括 transition-property、transition-duration 等所有子属性。你在 IE9 里写 transition: all 0.3s，等于没写。
常见错误现象：
- 页面在 IE9 下“瞬间切换”，Chrome/Firefox 正常过渡
- 开发者工具里看到
transition样式被划掉，状态为 “invalid” - 误以为加
-ms-transition或-webkit-transition能兜底——其实 IE9 对这些前缀也无反应
真正有效的做法只有一条：放弃 CSS 过渡，改用 JS 驱动的轻量动画。比如用 requestAnimationFrame 手动插值修改 element.style.width，或切换 class 控制 max-height（IE9 支持该属性的过渡伪替代）。
Safari ≤9.3 和 Android ≤4.4 必须加 -webkit-transition
现代浏览器（Chrome 63+、Firefox 63+、Safari 12.1+、Edge 79+）已全面支持标准 transition，无需前缀。但如果你仍需支持 iOS Safari ≤9.3（2016 年）或 Android Browser ≤4.4，就必须显式添加 -webkit-transition，且顺序不能错。
立即学习“前端免费学习笔记（深入）”；
关键规则：
-
-webkit-transition必须写在标准transition之前，否则旧内核读不到 - 两者的参数必须完全一致，比如都写
background-color 0.2s ease，不能一个写all一个写具体属性 - 不要加
-moz-transition或-o-transition——Firefox 16+、Opera 12.1+ 后已废弃，写了也没用
反例：transition: background-color 0.2s; -webkit-transition: all 0.2s; → 旧 Safari 会执行 all，但新引擎可能双触发；正例：-webkit-transition: background-color 0.2s; transition: background-color 0.2s;
transition 触发失败的常见原因
加了 transition 却没动画，大概率不是兼容性问题，而是触发条件不满足。
必须确认以下几点：
-
display: none → block不会触发过渡，改用opacity+visibility或max-height -
height: auto无法插值，浏览器算不出终点值；应先用 JS 获取真实高度，再设为具体 px 值 - JS 切换 class 后，目标属性值实际未变（比如两次都是
color: #333），可用getComputedStyle(el).color在控制台验证 - 某些旧 Android WebView 对
transition: all不敏感，若后续通过 JS 改了transform，得显式列出：transition: background-color 0.3s, transform 0.3s
transitionend 事件监听要防多套事件名和冒泡
transitionend 是唯一能感知过渡结束的钩子，但它在不同浏览器中事件名不统一，且有冒泡风险。
实操建议：
- 必须同时监听四个事件名：
transitionend、webkitTransitionEnd、mozTransitionEnd、oTransitionEnd - 用
event.target === el判断是否是目标元素触发，避免父元素冒泡干扰 - IE10+ 支持标准
transitionend，但 IE9 完全不支持该事件——此时只能靠setTimeout模拟，时间需略长于transition-duration
最容易被忽略的是：很多人在 IE11 的“IE9 文档模式”下测试，结果误判为 IE9 兼容正常——其实那只是仿真，底层仍是 IE11 引擎，不代表真实 IE9 行为。
