有人的地方就有【江湖】

猫名字叫江湖

我们常在网站上看到类似的行走动画，看上去非常酷炫。
比如烧饼哥的 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上的点赞动画》 实现方式是一样的，希望你看完这篇文章之后对类似的效果能够信手拈来。

来源：http://w3ctrain.com/2016/10/06/walking-cat/