最终效果：
http://codepen.io/idiotWu/pen/IDqlw
实现原理：
一、拿到雪碧图，一定要告诉设计小伙伴，这个雪碧图是自循环的。
二、用 keyframes 定义动画的规则
三、里面有个新东西需要解释 step()
首先参考 CSS3 timing-function: steps() 详解
主要需要使用 -webkit-animation如：
-webkit-animation:gogogo 2s infinite linear
其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环 linear是线性变化 (step-end则是无线性变化，直接输出结果)
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
