通过css样式实现精灵动画

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。 

这里用到animation来切换css的背景图片

  .slowWalk {
         /* 填入动画样式规则 */
        -webkit-animation-name:person-slow;
        -webkit-animation-duration:950ms;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:steps(1,start);
        -moz-animation-name:person-slow;
        -moz-animation-duration:950ms;
        -moz-animation-iteration-count:infinite;
        -moz-animation-timing-function:steps(1,start);
        animation-name:person-slow;  //规定@keyframes动画的名称
        animation-duration:950ms; //规定完成整个动画花费的时间
        animation-iteration-count:infinite; //规定动画被播放的次数。默认是 1， infinite表示循环播放
        animation-timing-function:steps(1,start); //有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式；

//第一个参数作用于每两个关键帧之间，这里指切换方式是一帧一帧改变。

//第二个参数start或end，2个参数都会选择性的跳过前后部分，start跳过0%的画面，end跳过100%的画面

    }
    
    /* 普通慢走 */
    
    @-webkit-keyframes person-slow {   /* Safari 和 Chrome */

        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }
    }
    
    @-moz-keyframes person-slow {     /* Firefox */

        0% {
            background-position: -0px -291px;
        }
        25% {
            background-position: -602px -0px;
        }
        50% {
            background-position: -302px -291px;
        }
        75% {
            background-position: -151px -291px;
        }
        100% {
            background-position: -0px -291px;
        }
    }