貓名字叫江湖

我們常在網站上看到類似的行走動畫，看上去非常酷炫。
比如燒餅哥的 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; }
}

你看實現(xiàn)原理就是逐幀顯示，映射到我們腦海中自動成了連貫的動畫。

之前翻譯過一篇文章 《Twitter上的點贊動畫》 實現(xiàn)方式是一樣的，希望你看完這篇文章之后對類似的效果能夠信手拈來。

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