内容节选自“http://www.zcool.com.cn/article/ZNDA0MjAw.html”
CSS3 实际上是使用animation-timing-function的阶梯函数steps(number_of_steps, direction)来实现逐帧动画的连续播放的。
在移动端，CSS3 Animation 兼容性良好，相对于 JS，CSS3 逐帧动画使用简单，且效率更高，因为许多优化都在浏览器底层完成。
逐帧动画有不同的动画帧，我们可以通过更改background-image的值实现帧的切换，但多张图片会带来多个 HTTP 请求，且不利于文件的管理。
比较合适的做法，是将所有的动画帧合并成一张图，通过改变background-position的值来实现动画帧切换。因此，逐帧动画也被称为“精灵动画（sprite animation）”。
以京东到家的触屏页面《年货送到家》为例：
这个动画一个有三帧，将3个动画帧合并，并放到.p8 .page_key的背景中：
（2）使用 steps 实现动画播放
steps 指定了一个阶梯函数，包含两个参数：
1. 第一个参数指定了函数中的间隔数量（必须是正整数）；
2. 第二个参数可选，指定在每个间隔的起点或是终点发生阶跃变化，接受 start 和 end 两个值，默认为 end。（参考自W3C）
通过W3C中的这张图片来理解 steps 的工作机制：
回到上述的例子，我们在 keyframes 中定义好每个动画帧：
然后，给他加上animation：
为什么第一个参数是1？
前文中提到，steps 是animation-timing-function的一个属性值，在W3C中有如下说明：
For a keyframed animation, the ‘animation-timing-function’ applies between keyframes, not over the entire animation.
也就是说，animation-timing-function应该于两个 keyframes 之间，而非整个动画。在上面的 keyframes 中，我们已经把每个帧都写出来了，所以两个 keyframes 之间的间隔是1。
更加简便的写法？
既然说 steps 第一个参数是指函数的间隔数量，那么我们就可以把 keyframes 的计算直接交给 steps 来完成。
以上两种写法效果是等同的。
CSS3 逐帧动画使用技巧
（1）step-start 与 step-end
除了steps函数，animation-timing-function还有两个与逐帧动画相关的属性值step-start与step-end：
1. step-start等同于steps(1,start)：动画执行时以开始端点为开始；
2. step-end等同于steps(1,end)：动画执行时以结尾端点为开始。
（2）动画帧的计算：
（3）适配方案：rem+scale
我们知道，rem 的计算会存在误差，因此使用雪碧图时我们并不推荐用 rem。如果是逐帧动画的话，由于计算的误差，会出现抖动的情况。
那么在触屏页中，如何实现页面的适配？
这里小编提供一个思路：
1. 非逐帧动画部分，使用rem做单位；
2. 逐帧动画部分，使用px做单位，再结合js对动画部分使用scale进行缩放。
