实现一个奔跑效果，你需要以下几个资源
- 一个雪碧图，包含了奔跑动作的关键帧，一般12个左右
- 一段除CSS 代码把上边的雪碧图通过动画依次展示出来
最终效果：
http://codepen.io/idiotWu/pen/IDqlw
需要在动画中添加操作的，就需要使用 CSS 实现，否则可以直接用 Gif
实现原理：
一、拿到雪碧图，一定要告诉设计小伙伴，这个雪碧图是自循环的。
奔跑的雪碧图
二、用 keyframes 定义动画的规则
$spriteWidth: 140px;
$spriteHeight:140px;
$steps: 12;
@keyframs run{
0% { background-position: 0 0;}
100% {background-position: -($spriteWidth * 12) 0;}
}
#target {
width: $spriteWidth;
height: $spriteHeight;
background: url("../images/sprite.png") 0 0 no-repeat;
animation: run 0.6s step($steps) infinite;
}
三、里面有个新东西需要解释 step()
首先参考 CSS3 timing-function: steps() 详解
steps([, [ start | end ] ]?)：第一个参数number为指定的间隔数，即把动画分为n步阶段性展示，第二个参数默认为end，设置最后一步的状态，start为结束时的状态，end为开始时的状态，若设置与animation-fill-mode的效果冲突，而以animation-fill-mode的设置为动画结束的状态。
