现代浏览器已全面支持标准 transition 语法，无需前缀；仅需为 iOS ≤9.3、Android ≤4.4 等极旧环境按需添加 -webkit-transition，且须置于标准属性之前，否则引发冗余或双过渡。
transition 属性在 Chrome/Firefox/Safari/Edge 的兼容性现状
现代浏览器（Chrome 63+、Firefox 63+、Safari 12.1+、Edge 79+）已全面支持标准 transition 语法，无需任何前缀。所谓“加前缀解决兼容问题”的说法，对当前主流版本基本不成立——你加了 -webkit-transition，现代 Safari 反而可能因解析优先级或重复声明引发意外交互异常。
哪些旧版本真需要前缀？实际项目中要不要加？
真正需要前缀的场景只存在于：仍需支持 iOS Safari ≤ 9.3（2016 年）、Android Browser ≤ 4.4、旧版 Android WebView 或 IE 10–11（它根本不支持 transition，加前缀也无效）。如果你的项目统计数据显示这类用户占比低于 0.2%，建议直接放弃前缀；否则可按需添加：
-
-webkit-transition：仅对 iOS ≤ 9.3 和 Android ≤ 4.4 生效（注意：Safari 10+ 已忽略该前缀） -
-ms-transition：IE 10 支持，但 IE 11 已转向标准属性，且该前缀在 Edge 12+ 完全无效 -
-moz-transition和-o-transition：Firefox 16+、Opera 12.1+ 后已废弃，加了无意义
写法顺序和重复声明的风险
如果决定保留前缀，必须把带前缀的声明放在标准属性之前，否则会被覆盖：
button {
-webkit-transition: background-color 0.3s ease;
transition: background-color 0.3s ease; /* 正确：后声明的标准属性生效 */
}反例是把标准属性写在前面，再补前缀——旧引擎读到第一行就停了，根本不会解析第二行；而新引擎会直接用第二行，导致前缀冗余甚至触发双过渡（某些 Safari 旧版本会同时执行两行）。
立即学习“前端免费学习笔记（深入）”；
更隐蔽的问题是：当用 transition: all 0.3s 时，若元素后续通过 JS 动态改了 transform，部分旧 Android WebView 会因未显式列出该属性而跳过过渡——此时应明确写出：transition: background-color 0.3s, transform 0.3s。
替代方案比硬加前缀更可靠
比起维护一堆过时前缀，推荐两种更可持续的做法：
- 用 Autoprefixer 配合
browserslist自动注入（例如设为"supports es6"或"last 2 versions"），构建时按需加，源码保持干净 - 对关键动效（如模态框淡入），用
@keyframes+animation替代，后者在 IE 10+ / Android 4.4+ 的兼容性反而更稳，且能精确控制中间帧
真正容易被忽略的是：transition 触发依赖“可动画属性”的值变化，但像 display、height: auto、font-size 在某些旧 Safari 中无法过渡——这不是前缀问题，而是 CSS 引擎限制，得换思路（比如用 max-height 模拟高度展开）。
