解决transition兼容性问题，让动画更流畅

做演示时加点动画效果，能让页面显得更生动。用CSS的transition实现渐变、滑动、缩放这些效果挺方便，但实际用起来，经常遇到某些浏览器不认账的情况，尤其是老版本IE或者一些国产壳浏览器，动画直接卡住甚至完全不生效。

常见出问题的地方

比如你写了个按钮hover时背景色渐变的效果：

.btn {
  background-color: #007bff;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

这段代码在Chrome、Firefox上跑得好好的，可一放到IE10以下，基本没反应。因为IE9及更早版本压根不支持transition，IE10开始才部分支持，而且得加前缀。

加前缀不是过时操作

别以为现在都不用写-webkit-这类前缀了，真到了兼容性场景，它们还是救命稻草。特别是移动端一些定制内核，或者企业内部还在用的老系统浏览器。

稳妥写法应该是：

.btn {
  background-color: #007bff;
  -webkit-transition: background-color 0.3s ease;
     -moz-transition: background-color 0.3s ease;
      -ms-transition: background-color 0.3s ease;
       -o-transition: background-color 0.3s ease;
          transition: background-color 0.3s ease;
}

虽然看起来啰嗦，但能覆盖更多设备。特别是安卓4.x时代的手机，很多靠-webkit-才能正常触发动画。

有些属性就是不能过渡

transition不是万能的，并非所有CSS属性都能平滑过渡。比如display:none到block这种切换，就没法渐变。这时候得换思路，用opacity或者transform来模拟显示隐藏。

例如把消失做成淡出：

.fade {
  opacity: 1;
  -webkit-transition: opacity 0.3s ease;
          transition: opacity 0.3s ease;
}

.fade.hide {
  opacity: 0;
}

配合JS控制class，视觉上一样是“出现/消失”，还能保持动画流畅。

性能问题也会影响体验

在低配电脑或旧手机上，哪怕transition语法完全支持，也可能因为重绘太多导致掉帧。这时候可以尝试用transform代替left/top位移。

比如原本用left移动：

.move {
  position: relative;
  left: 0;
  transition: left 0.3s ease;
}

.move.active {
  left: 100px;
}

改成用translate会更顺：

.move {
  transform: translateX(0);
  -webkit-transition: transform 0.3s ease;
          transition: transform 0.3s ease;
}

.move.active {
  transform: translateX(100px);
}

因为transform由GPU加速，对老设备更友好。

测试别只盯着自己电脑

做完效果别急着交差，多找几台不同系统、不同浏览器的设备试试。公司里同事那台Win7配IE11的老笔记本，可能就是问题爆发点。实在没那么多设备，可以用BrowserStack这类工具模拟。

有时候一个简单的动画，在别人眼里可能是卡顿甚至错乱的。提前发现，改起来成本低。