［前言］
有人说，前端开发的过程常常就是一个不断“入坑”和“出坑”的。这句话道出了前端开发中的磕磕绊绊以及相伴而来的成长。遗憾的是，这些成长大都只存储在工程师的脑海里，日复一日的，相信总有不少人花掉昂贵的时间在重复解决着同样的“坑”。
Stack Overflow是我们查找一些常见bug解决办法的好帮手，但我们每天也遇到各式各样的新问题以及有一定独特性的问题。若能花一点精力将自己遇到的问题、思考过程、解决方案、延伸感悟等记录下来，让经验更具延续性和相对于具体某个工程师个体的独立性，相信会是一件多赢的事情。因此，我决心抛砖引玉，先把自己曾遇到的一些兼容性问题记录并分享出来。其中，有的可能不太容易遇到，有的可能非常简单。我将尽量采用“问题＋解决方案（＋感想）”的方式进行这个系列内容的编写。
下面言归正传。
有这样一个小动画，让元素<div class="animation-element1">hi, bugs!</div>从屏幕外从右侧滑入，停留一会儿之后再离开屏幕。实现起来很简单，用下面这个CSS样式片段就可以了。
.animation-element1{ position: fixed; -webkit-transform: translate(100%); transform: translate(100%); right: 0; top: 0; padding: 1rem; width: 10rem; background-color: #0fd5ff; border-radius: 2rem; color: #fff; -webkit-animation: opacity-transition1 ease 2s 1s; animation: opacity-transition1 ease 2s 1s; } @-webkit-keyframes opacity-transition1{ 0% { -webkit-transform: translate(100%); transform: translate(100%); } 20% { -webkit-transform: translate(-1rem); transform: translate(-1rem); } 80% { -webkit-transform: translate(-1rem); transform: translate(-1rem); } 100% { -webkit-transform: translate(100%); transform: translate(100%); } }但是，当用小米2S中的UC浏览器测试的时候，问题出现了——补间动画丢失了，动画中几个状态之间的切换都是硬切换。而在该手机下的Chrome和系统自带浏览器中均无此问题。
我首先考虑它会不会是个性能问题，尝试着用有“动画性能bug神器”之称的-webkit-transform: translate3D(0,0,0);进行修复，但问题未能解决。
仔细察看了一下上面的代码，我又发现，keyframes中几个状态的transform值有时是rem, 有时是百分比，问题会不会出在这里呢？于是，我做了另外一个demo，增加了一个<div class="animation-element2">hi, bugs!</div>，并加上如下样式片段：
.animation-element2{ position: fixed; -webkit-transform: translate(100%); transform: translate(100%); right: 0; top: 20rem; padding: 1rem; width: 10rem; background-color: #0fd5ff; border-radius: 2rem; color: #fff; -webkit-animation: opacity-transition2 ease 2s 1s; animation: opacity-transition2 ease 2s 1s; } @-webkit-keyframes opacity-transition2{ 0% { -webkit-transform: translate(100%); transform: translate(100%); } 20% { -webkit-transform: translate(-10%); transform: translate(-10%); } 80% { -webkit-transform: translate(-10%); transform: translate(-10%); } 100% { -webkit-transform: translate(100%); transform: translate(100%); } }它的主要变化点在于将keyframes的所有translate都改成了百分比表示。经过测试，问题解决了。于是，我又做了另一个demo——把keyframes的所有translate都改成rem表示的（代码片段如下），问题同样得到解决。此外，我通过translate混用百分比和px两种单位进行测试，效果和一开始混用百分比和rem的那个demo一致，也会出现上述bug。这下问题点就确定了，就是-webkit-keyframes中各阶段translate的表示单位不一致导致了问题的产生。
<div class="animation-element3">hi, bugs!</div> .animation-element3{ position: fixed; -webkit-transform: translate(12rem); transform: translate(12rem); right: 0; top: 40rem; padding: 1rem; width: 10rem; background-color: #0fd5ff; border-radius: 2rem; color: #fff; -webkit-animation: opacity-transition3 ease 2s 1s; animation: opacity-transition3 ease 2s 1s; } @-webkit-keyframes opacity-transition3{ 0% { -webkit-transform: translate(12rem); transform: translate(12rem); } 20% { -webkit-transform: translate(-1rem); transform: translate(-1rem); } 80% { -webkit-transform: translate(-1rem); transform: translate(-1rem); } 100% { -webkit-transform: translate(12rem); transform: translate(12rem); } }但是，这只证明了keyframes中这么写会有这个问题。那么如果不用keyframes实现动画，而用transition来实现，会不会有同样的问题呢？我又写了下面这个demo：
<div class="animation-element4">hi, bugs!</div> <script> var $el4 = document.querySelector('.animation-element4'); setTimeout(function () { $el4.className+= ' animation-test'; },2000); $el4.addEventListener('webkitTransitionEnd', function () { $el4.className = 'animation-element4'; }) </script> .animation-element4{ position: fixed; -webkit-transform: translate(100%); transform: translate(100%); right: 0; top: 60rem; padding: 1rem; width: 10rem; background-color: #0fd5ff; border-radius: 2rem; color: #fff; -webkit-transition: -webkit-transform ease 2s; transition: transform ease 2s; } .animation-element4.animation-test{ -webkit-transform: translate(-10rem); transform: translate(-10rem); }试验表明，问题和本文一开始那个demo一样，即也会出现bug。
因此，不管是用keyframes，还是用 transition实现动画，动画过程中几个状态的translate的表示单位不一致的时候，在小米2S的UC浏览器中都会出现补间动画丢失的问题。解决的方案就是统一动画过程中各个状态的translate的表示单位。这应该也是动画的应有之意，只是写代码的时候并没有刻意去留意。相信肯定还会有更多的机器上能复现此问题。
