使用CSS为Spritesheet制作动画 [英] Animating a spritesheet using css

问题描述

我无法使用CSS为Spritesheet设置动画我看到的每个示例都包含一个精灵表，其中只有1行精灵或1列像这样:

I am having trouble animating a spritesheet using css every example i see contain a sprite sheet with only 1 line of sprite or 1 column like this :

，然后使用关键帧

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

但对我而言，电子表格是10x8的网格

but for me the spritesheet is a grid with 10x8

对于这个特殊的Spritesheet，他们是否仍要使用CSS来实现动画?还是我应该改用HTML5 canvas?

Is their anyway to achieve an animation using css for this particular spritesheet ? or i should use HTML5 canvas instead ?

每个帧都是90x96像素

Every frame is 90x96 px

这是我的照片

推荐答案

在网格精灵上处理动画的方法是使用2个动画.一种是水平的，另一种是垂直的

The way to handle an animation on grid sprites is to use 2 animations. One for horizontal and one for vertical

.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动画(不连续)

My answer is based on this answer: CSS animations with Spritesheets in a grid image (not in a row)

这篇关于使用CSS为Spritesheet制作动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！