transition兼容性问题：这些坑你可能天天在踩

做网页动画时，transition 是个好帮手。但一上线，发现有些用户看到的效果不对劲，甚至完全没动画——大概率是兼容性问题在作祟。

IE 8 和 9 根本不认 transition

老系统上跑着 IE8、IE9？那基本可以放弃用原生 CSS transition 了。这两个版本压根不支持这个属性。如果你的公司还有内部系统必须兼容老浏览器，别指望 transition 能起作用，得靠 JS 来模拟动画效果。

带前缀的浏览器曾是常态

几年前，不是所有浏览器都统一标准。Firefox 曾经要用 -moz- 前缀，Chrome 和 Safari 早期版本依赖 -webkit-。虽然现在新版浏览器基本都去前缀了，但如果你的用户还在用旧版 Chrome（比如某些锁定版本的企业环境），只写 transition: all 0.3s 可能会失效。

稳妥的做法是把常见前缀都写上：

<style>
.button {
  -webkit-transition: all 0.3s;
     -moz-transition: all 0.3s;
      -ms-transition: all 0.3s;
       -o-transition: all 0.3s;
          transition: all 0.3s;
}
</style>

移动端也有意外

你以为手机端没问题？某些国产定制 Android 系统里的“全家桶”浏览器，内核更新慢，对 CSS3 支持残缺。比如 transition 搭配 transform 使用时，可能卡顿或直接跳过动画。这时候加一句 -webkit-transform: translateZ(0) 反而能触发硬件加速，让动画顺滑起来。

属性值不是都能过渡

transition 并非万能。像 display: none 到 block 这种切换，没法做渐变。visibility 虽然能过渡，但它是突然生效的，中间没有过程。正确做法是结合 opacity 和 height 控制显隐，这样 transition 才能起作用。

<style>
.fade-box {
  opacity: 0;
  height: 0;
  overflow: hidden;
  transition: opacity 0.3s, height 0.3s;
}

.fade-box.show {
  opacity: 1;
  height: auto;
}
</style>

别忽略低性能设备

公司发的旧款笔记本，或者爸妈用的入门级安卓机，GPU 性能弱。复杂的 transition 动画在这些设备上容易掉帧。建议避免同时过渡多个属性，尤其是 width、height 这类会触发重排的。优先用 transform 和 opacity，它们由合成层处理，更高效。

开发时不妨用手机热点连到测试页面，拿老手机亲自试试，比看文档更直观。