制作帧动画时，一般采用Sprite图片的方式，通过切换图片的位置，使其不断播放，从而形成动画。精灵图精灵图的制作可以用指南针来制作，也可以借助一些小工具来制作。提供了一个在线制作精灵图的网站。CSSSpritesGenerator逐帧动画我们可以使用css3关键帧来进行逐帧动画。sprite{height:78px;宽度：28px；背景：url(images/people.png)不重复；背景尺寸：112px78px；动画：人物.5s步（1，开始）无限；}@keyframes人物{0%{background-position:00}25%{background-position:-28px0;}75%{background-position:-56px0}100%{background-position:-84px0;}}如果动画没有设置steps(1,start/end)，动画帧之间会使用默认的transition方式，此时观察到的动画会变成一个滑动方法，这不是我们想要的。为此，我们需要使用steps函数。stepssteps(number_of_steps,direction)steps计时函数接受两个参数，steps(n,start/end)，其中n为正整数，表示分为若干步完成执行，后一个参数可选，以及默认是结束。start表示一个左连续函数，在每个区间开始时发生阶跃变化，直到区间时间结束end表示一个右连续函数，在每个区间结束时发生阶跃变化关于steps()的更多信息，请参阅如何在CSS动画中使用steps()。对于人物行走的动画，由于是一个连续循环的过程，设置开始或者结束是可行的。对比background-position和translate3d方法background-position会导致重绘，而translate3d不会。（引起回流和重绘的属性可以查看csstriggers这个网站，这个网站的介绍可以查看这个答案。）同时translate3d会开启GPU渲染加速，性能更好。总之，translate3d方法是优越的。使用translate3d改造后的代码，使用after伪类填充背景，然后控制元素的移动，实现逐帧动画。.sprite{overflow:hidden;//设置超出隐藏高度:78px;宽度:28px;}.sprite:after{内容:"";//添加内容，内容会显示出来display:block;宽度：112px；高度：78px；背景：url(images/people.png)不重复；背景尺寸：112px78px；动画：人物.5s步（1，开始）无限；}@keyframes人物{0%{transform:translate3d(0,0,0)}25%{transform:translate3d(-28px,0,0)}75%{变换：translate3d(-56px,0,0)}100%{transform:translate3d(-84px,0,0)}}
