javascript - 使用 css 动画 spritesheet

Question

我在使用 css 为 spritesheet 设置动画时遇到问题我看到的每个示例都包含一个只有 1 行 Sprite 或 1 列的 Sprite 表像这样:

然后他们使用关键帧对其进行动画处理

@keyframes play {
100% { background-position: -1900px; }
}

但对我来说，spritesheet 是一个 10x8 的网格

他们是否要为这个特定的 spritesheet 使用 css 实现动画？或者我应该改用 HTML5 Canvas ？

每一帧都是 90x96 像素

这是我的头像

Answer 1

处理网格 Sprite 动画的方法是使用 2 个动画。一横一竖

Live Demo

.hi {
    width: 90px;
    height: 96px;
    background-image: url("http://i.stack.imgur.com/G7o8R.jpg");
    -webkit-animation: playv 6s steps(7) infinite, playh 1s steps(9) infinite; 

}


@-webkit-keyframes playv {
     0% { background-position-y:   0px; }
   100% { background-position-y: 100%; }
}

@-webkit-keyframes playh {
     0% { background-position-x:   0px; }
   100% { background-position-x: 100%; }
}

我的回答是基于这个答案: CSS animations with Spritesheets in a grid image (not in a row)