css3帧（雪碧图）动画实现

所谓雪碧图就是一张图，包含了很多小图，可以通过这些小图实现一个动作，如下是一张雪碧图，我们可以通过CSS的animation来设置背景图片的位置，呈现出一种动态效果。

代码实现

.test{ 
    // 务必设置box的宽度，这样其他不在box中就不会显示
    width:100px;
    height:100%; 
    background-image:url(text.png);
    background-repeat:no-repeat; 
    background-position:0 0; // (可忽略)
    background-size:700px;  
    -webkit-animation:animate-name 2.2s steps(7) both;  

    // steps（7）表示设置7帧完成动画
    animation:animate-name 2.2s steps(7) both;
}

@-webkit-keyframes animate-name{  
   0%{ background-position:0 0;} 
   100%{ background-position:-700px 0;}  
}

@keyframes animate-name{  
  0%{ background-position:0 0;}  
  100%{ background-position:-700px 0;}  
}

注意几点：
steps(7) 是关键哦
关键帧只需设置0%（ background-position:0 0;），100%（ background-position:-700px 0;）
动画均匀地分7帧执行，每次都有固定相等的偏移量
雪碧图由7张图片拼成的
雪碧图的宽度是设置动画盒子的7倍

infinite   循环执行
both     执行一次   帧比雪碧图数量少一帧才可以停止执行