CSS3帧动画

在制作帧动画的时候，一般采用雪碧图的方式，通过切换图片的位置，使其连续播放，从而形成动画。

雪碧图

雪碧图的制作可以使用compass制作，还可以使用一些小工具进行制作，提供一个在线制作雪碧图的网站。
CSS Sprites Generator

逐帧动画

我们可以使用css3的keyframes的方式进行逐帧动画

.sprite{
    height:78px;
    width:28px;
    background:url(images/people.png) no-repeat;
    background-size:112px 78px;
    animation:people .5s steps(1, start) infinite;
}
@keyframes people{
    0%{background-position: 0 0 }
    25%{ background-position:-28px 0;}
    75%{ background-position: -56px 0 }
    100%{ background-position:-84px 0;}
}

如果animation没有设置steps(1,start/end)，动画帧之间将采用默认的过渡方式，此时观察到的动画会变成滑动的方式，这不是我们想要的效果。
为此，我们需要使用steps函数。

steps

steps(number_of_steps, direction)

steps timing function接受两个参数，steps(n,start/end)，其中n为正整数，表示分为几步执行完，后一个参数是可选的，默认为end。

• start表示的是一个左连续函数，在每个间隔的起点就发生阶跃变化，直到该间隔时间结束
• end表示的是一个右连续函数，在每个间隔的终点才发生阶跃变化

关于steps()更多的资料可以查看 How to Use steps() in CSS Animations
对于人物走动的动画，由于是一个不断循环的过程，所以设置为start或者end都是可行的。

background-position与translate3d方式的比较

background-position会引起重绘，而translate3d不会。（对于会引起回流和重绘的属性可以查看这个网站 csstriggers，关于这个网站的介绍可以查看 这个回答）
同时translate3d会开启GPU渲染加速，性能更好。
综上所述，translate3d方式较为优越。

使用translate3d改造之后的代码，利用after伪类进行背景填充，然后控制该元素移动来实现逐帧动画。

.sprite{
    overflow:hidden;//设置超出隐藏
    height:78px;
    width:28px;
}
.sprite:after{
    content:""; //加上content，内容才会显示
    display:block;
    width:112px ; 
    height:78px;
    background:url(images/people.png) no-repeat;
    background-size:112px 78px;
    animation:people .5s steps(1, start) infinite;
}
@keyframes people{
    0%{transform: translate3d(0,0,0)}
    25%{transform: translate3d(-28px,0,0)}
    75%{transform: translate3d(-56px,0,0)}
    100%{transform: translate3d(-84px,0,0)}
}