关于如何使用css3中的steps完成图片帧动画

前端中的动画效果可以有很多种方法完成，对于一些简单的颜色、大小、长度、位置变化都可以通过transition轻松实现，对于一些复杂的、不规则的动画就要借助图片来完成了。

今天介绍一种结合图片和css3中的keyframes和animation实现的复杂动画方法。

先看图片和动画效果，


实现的原理是通过改变背景图片的位置，从而让人看起来是动画，看一下它的源码：

<div class="box"></div>

.box {
    width: 50px;
    height: 72px;
    background-image: url("http://s.cdpn.io/79/sprite-steps.png");
    animation: play .8s steps(10) infinite;
}
@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

可以看到keyframes里面背景图片的位置从0px移动到了-500px(图片向左移动)；如果我们把steps(10)去掉并将动画时间设置为2s，再看看是什么效果

现在大概知道steps()的作用了吧，steps()将动画分割成段，而不是像上面的例子一样平滑的移动，这样就可以通过一帧一帧的图片实现动画了

---

steps()有两个参数，steps(number,direction)
第一个参数是表示动画分割的段数，如上例子中是有10张图片，分为了10帧，所以第一个参数是10
第二个参数是可选的，有’start’和’end’，”start”表示一个左–持续函数，在动画开始时，动画的第一段将会马上完成。以左侧端点为起点，立即跳到第一个step的结尾处。它会立即跳到第一段的结束并且保持这样的状态直到第一步的持续时间结束。后面的每一帧都将按照此模式来完成动画。”end”表示一个右–持续函数。动画执行时，在每一帧里，动画保持当前状态直到这一段的持续时间完成，才会跳到下一步的起点，后面的每一帧都按照这个模式来进行，在最后一帧的起点，等到这一帧的持续时间结束，整个动画的执行也已经结束，执行动画的元素来不及跳到这一帧的终点，直接回到了整个动画起点，开始了第二次动画。