猫名字叫江湖
我们常在网站上看到类似的行走动画，看上去非常酷炫。
比如烧饼哥的 about me 页面。
但类似的效果，前端的工作量很小。
首先你需要一张动画精灵图。
cat-sprite
没有？ 去跟设计师要啊！！！
如果设计师没有帮你拼接精灵图的话，可以使用 Gulp Tool 或者在线 在线工具 帮你完成。
有了图片之后开始写代码吧，就两行~
#gato{
background: url('https://ohc0m0ub0.qnssl.com/903f9439c70b939db47b179ade6622211475736220133.svg');
height: 297px;
width: 507.5px;
margin-top: 2em;
margin: auto;
z-index: 10;
animation: spriteAnimation 1.2s steps(16,end) infinite;
}
@keyframes spriteAnimation {
from { background-position: 0 0; }
to { background-position: -8120px 0; }
}
你看实现原理就是逐帧显示，映射到我们脑海中自动成了连贯的动画。
之前翻译过一篇文章 《Twitter上的点赞动画》 实现方式是一样的，希望你看完这篇文章之后对类似的效果能够信手拈来。
