使用css动画spriteesheet

Question

我在使用css动画制作spritesheet时遇到麻烦每个例子我看到包含一个只有1行精灵或1列的精灵表,如下所示:

然后他们使用动画制作动画 keyframes

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

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

他们无论如何使用css为这个特殊的spritesheet实现动画？或者我应该使用HTML5画布？

每帧为90x96像素

这是我的形象

Answer 1

处理网格精灵上的动画的方法是使用2个动画.一个用于水平,一个用于垂直

现场演示

.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%; }
}

我的回答是基于这个答案: 在网格图像中使用Spritesheets的CSS动画(不是连续)