transition属性最低支持版本为ie10+、chrome26+、firefox16+、safari6.1+、opera12.1+;ie9及更早版本完全不支持,且需注意android webview等特殊环境兼容性问题。

transition 属性的最低支持版本是多少
现代浏览器基本都原生支持 transition,但 IE 需要 10+ 才能用标准语法;IE9 及更早版本完全不支持。Chrome 26+、Firefox 16+、Safari 6.1+、Opera 12.1+ 均无需前缀。如果你的项目仍需兼容 IE10/11,可以放心使用,但得避开 IE9– 的场景。
要不要加浏览器前缀
2026 年绝大多数生产环境已无需手动加前缀——Autoprefixer 等工具会按目标浏览器列表自动注入(如仍需支持 Firefox ESR 或旧版 Safari)。但若手动写,要注意:
-
-webkit-transition仅在 Safari ≤6、iOS ≤6、Android ≤4.3 中必需 -
-moz-transition仅对 Firefox ≤15 有效(2012 年前) -
-o-transition对 Opera ≤12.0 有效(Presto 内核时代) -
-ms-transition是 IE10 的私有前缀,IE11 已支持标准语法
哪些属性能被 transition 动画化
不是所有 CSS 属性都能过渡。可动画化的必须是「可计算的数值型或颜色型」属性,例如:
-
width、opacity、background-color、transform✅ -
display、height(当设为auto时)❌ -
font-size、margin、box-shadow✅(但注意:多值阴影需结构一致才能平滑过渡)
用 transition-property: all 很方便,但容易意外触发非预期属性变化,建议显式列出关键属性。
立即学习“前端免费学习笔记(深入)”;
兼容性验证该看哪个权威来源
别信“某教程说支持”,直接查 caniuse.com/#search=transition —— 它聚合了真实浏览器 UA 数据和测试结果。比如你会看到:
- Safari iOS 8.4 支持率 99.7%,但 iOS 7.1 仅 1.2%(可据此决定是否降级处理)
- Android Browser 4.4 仍需
-webkit-,而 Chrome for Android 45+ 已完全标准 - Electron 与 WebView 版本需单独查对应 Chromium 内核版本
真正容易被忽略的是:transition 在某些安卓 WebView(如微信内置 X5)中可能因内核冻结而行为异常,哪怕标称支持,也建议加简单 fallback 检测逻辑。










