Css3 实现关键帧动画

<div class="person">

</div>

<script>
        var str1 = "@keyframes move{";
        for(var i = 0;i < 7;i++){
            var str = ((100/6) * i)+"%{"+"background-position:"+(-180*i)+"px 0;}";
            str1 += str;
        }
        $("head style").prepend(str1+"}");
</script>

<style>
     .person{
        width: 180px;
        height: 300px;
        background: url(img/charector.png) left no-repeat;
        box-shadow: 0 0 5px #000;
        margin: 100px auto 0;
        animation: move 1s step-start infinite;
    }
</style>

素材图片如上：

　　图片尺寸（1260 * 300）（180 * 7）；

使用css3 animation 下的step 帧动画完成！

如上代码实例所示

纯css3 实现如下：

@keyframes move{
            0%{
                background-position: 0 0;
            }
            16.66667%{
                background-position: -180px 0;
            }
            33.33334%{
                background-position: -360px 0;
            }
            50%{
                background-position: -540px 0;
            }
            66.66667%{
                background-position: -720px 0;
            }
            83.33334%{
                background-position: -900px 0;
            }
            100%{
                background-position: -1080px 0;
            }
}