有个细节，安卓2.3.*不能良好支持-webkit-animation-fill-mode，也就是渐变动画不能停止在最后一帧。有这样一个解决方案：

1.用Modernizr去检测是否支持这个属性，加上识别类.no-animation-fill-mode；

2.根据识别类采取以下措施：
（1）用js模拟同样效果；
（2）用css屏蔽掉动画；
（3）或者直接全部都用transition来做（不要keyframes）。

Android手机的屏幕碎片化非常严重，各种各样的分辨率非常之多，那么如何让游戏可以适配这些机型就显得尤为重要。这里也是前前后实验了多种方案。先想到用JS来动态的根据分辨率来设置相关元素的大小，但要么在某些机型中获取失败，要么用赋值缩放相关元素时造成游戏崩溃……用 absolute 来解决：

关键代码：

1

2

3

4

5

6

7

8

.game {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    overflow: hidden;

    }

以上代码使游戏容器绝对定位之后，上下左右四边都与手机屏幕贴紧，从而做到了适配各种屏幕。
然后使用 background-size:cover; 让背景覆盖全屏，此代码可以使背景 自动缩放 至 覆盖 容器大小。

为了适应各种屏幕，应该使用动态居中的布局，而不是传统页面的左上角为基准：

.welcome { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -111px; background-image: url("img/wel.png"); width: 222px; height: 200px; }

希望每次浏览这一屏内容的时候，动画都走一遍，可以使用reflow重新触发一下animation:

container.classList.remove("active"); container.offsetWidth = container.offsetWidth; container.classList.add("active");

animation-timing-function:steps(4, start);

第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

每一帧变化会自动计算取平均值。

原理还是在不断的移动背景图片，但每种背景会保留一段时间，通过他我们可以方便的制作帧动画