问题
在项目中，为了添加loading加载动画，有几种方式
- 可以通过ui多张切图，动态循环请求多张图片，从而打到动画的效果
- 可以直接使用gif动画
- 可以使用本内容要介绍的雪碧图动画。
优缺点
- 在使用多张切图时，可以很方便的实现动画效果，但是由于前端请求多张图片，增加了资源访问，在网络情况不好的情况下，可能会有出现卡顿或者丢失图片的问题
- 在使用gif的时候，由于gif会出现毛边的情况，影响显示效果。
- 在使用雪碧图时，由于多张图组装成一张图，所以会减少网络请求，显示时不会有图片丢失。
但是由于需要严格控制图片的位置，所以在修改雪碧图时，如果改变了之前图片的位置，则css中样式需要进行修改，会增加一定的工作量。 考虑了网络请求和显示效果，最终我通过使用雪碧图来实现加载动画。
雪碧图原理
简单来说，将多张图片组装到一张图片中，我们通过偏移一定的位置和大小，将整张图中的某一个切片显示出来。从而在页面上显示。比如
这张图是有多个图片组合而来。每一张图的大小都是17646.我们从左到右进行偏移。第一次为0，第二次偏移-176px，第三次偏移-1762，第四次偏移-176*3......,最终会循环显示不同的图片。
相对于坐标原点，x轴指向右为正值，向左为负值；y轴向下为正值，向上为负值。
所以偏移时，根据图片相对于容器来说，需要向左，向上偏移。
css设置
通过css设置的话，最主要用到了background-image、background-position、background-size属性。比如
background: url(../img/loading.png) no-repeat;
width: 170px;
height: 46px;
/*
* 由于此图片是由9副图片组成的，所以宽度为900%。
*/
background-size: 900%;
/*
* 从左开始定位
*/
background-position: 0 0;
/*
* 如果使用第二副图时，background-position: -170px 0;
*/
动画设置
由于需要loading动画，所以需要使用动画，动态偏移此position。
@keyframes loading-frames {
from {background-position:left;}
to { background-position:right;}
}
/*
* 设置loading-frames动画，steps方法
* 由于9副图片，所以间隔step需要8，并且步调是1，整个动画在0.72s完成
*/
animation: loading-frames .72s steps(8) 1;
/*
* 循环播放
*/
animation-iteration-count: infinite;
