截至2026年，chrome 63+、firefox 63+、safari 12.1+、edge 79+等现代浏览器已全面原生支持标准transition语法，无需前缀；ie10支持标准写法但ie9及以下完全不支持，且加前缀无效。
transition 现在基本不需要加浏览器前缀了，但得看你的目标兼容范围。
哪些浏览器已原生支持标准 transition
截至 2026 年，所有主流现代浏览器（Chrome、Firefox、Safari、Edge）都已完全支持无前缀的 transition。IE10+ 支持标准写法，IE9 及以下不支持该属性，且无法通过前缀补救。
transition 前缀只对老版本生效
加前缀仅对特定旧版本有效：
-
-webkit-transition：曾用于 Safari ≤ 6.1、iOS ≤ 6.1、Android ≤ 4.3、Chrome ≤ 25 -
-moz-transition：曾用于 Firefox ≤ 15 -
-o-transition：曾用于 Opera ≤ 12.1 -
-ms-transition：IE10 支持标准写法，IE9 不支持，加前缀也无效
这些版本早已退出主流使用场景。如果你的项目不需兼容 2015 年前的移动端或桌面端老旧系统，加前缀纯属冗余。
加前缀反而可能引发问题
常见误用现象：
Comet AI 浏览器
下载
下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。
- 重复声明导致样式覆盖混乱，比如同时写
-webkit-transition和transition，而 timing-function 参数不一致 - 某些旧版 Safari（如 iOS 6）对多属性过渡解析异常，
transition: all 0.3s比transition: width 0.3s, height 0.3s更容易出错 - 构建工具（如 PostCSS autoprefixer）若配置过宽（如 target: "> 1%"），会盲目注入已失效的前缀，增大 CSS 体积
实际建议怎么写
推荐写法（简洁、可维护、无冗余）：
button {
background-color: #333;
transition: background-color 0.2s ease, transform 0.2s ease;
}
button:hover {
background-color: #007bff;
transform: scale(1.05);
}
如果项目明确要求支持 IE10 或 Android 4.4，仍可用标准写法；若必须兼容 IE9 或更早，transition 本身就不适用，得换 JS 动画方案。
真正容易被忽略的是：transition 触发依赖“属性值变化”，而不是“类名切换”本身——哪怕加了前缀，如果初始态和终态之间没有可过渡的 CSS 属性差异（比如 display 切换），动画照样不生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
