CSS动画与网格图像中的Spritesheets（不在一行） [英] CSS animations with Spritesheets in a grid image (not in a row)

问题描述

我尝试为sprite图片设置动画，并找到了一个很好的例子：

博客：

现在，让我们验证同时设置两个动画：

CSS

  .hi {
 width：320px; 
 height：315px; 
 background-image：url（moon.jpg）; 
 position：relative; 
 border：solid 1px black; 
} 
 
 .hi：before {
 content：; 
 position：absolute; 
 width：53px; 
 height：53px; 
 left：0px; 
 top：0px; 
 border：solid 1px red; 
 -webkit-animation：playv 18s steps（6）infinite，playh 3s steps（6）infinite; 
} 
 
 @ -webkit-keyframes playv {
 0％{top：0px; } 
 100％{top：315px; } 
} 
 
 @ -webkit-keyframes playh {
 0％{left：0px; } 
 100％{left：320px; } 
} 
  

演示2

现在最终的项目

  .hi {
 width：53px; 
 height：53px; 
 background-image：url（http://i.stack.imgur.com/CjMscm.jpg）; 
 position：relative; 
 border：solid 1px black; 
 -webkit-animation：playv 6s steps（6）infinite，playh 1s steps（6）infinite; 
 
} 
 
 
 @ -webkit-keyframes playv {
 0％{background-position-y：0px; } 
 100％{background-position-y：-315px; } 
} 
 
 @ -webkit-keyframes playh {
 0％{background-position-x：0px; } 
 100％{background-position-x：-320px; } 
} 
  

演示3

对于webkit浏览器，删除IE和FF的前缀。
此外，在这种方法中，避免在左下角显示2个空白图像是不可能的。如果您没有完整的网格，并且不想显示空白图片，则需要逐个指定所有关键帧

I'm trying to animate a sprite image, and found this great example:

Blog: http://simurai.com/blog/2012/12/03/step-animation/

JSFiddle: http://jsfiddle.net/simurai/CGmCe/

.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");

-webkit-animation: play .8s steps(10) infinite;
   -moz-animation: play .8s steps(10) infinite;
    -ms-animation: play .8s steps(10) infinite;
     -o-animation: play .8s steps(10) infinite;
        animation: play .8s steps(10) infinite; }

@-webkit-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

@-moz-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

@-ms-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

@-o-keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

@keyframes play { from { background-position: 0px; } to { background-position: -500px; } }

I'd like to do the same thing, but using a square (power-or-two sized) image atlas instead of an animation strip. For example, this one:

解决方案

Since this can be a difficult to debug task, I would like to start with the same problem, but in an easier to debug environment.

I chose to do it as a rectangle animation over the full image.

CSS

.hi {
    width: 320px;
    height: 315px;
    background-image: url("http://i.stack.imgur.com/CjMscm.jpg");
    position: relative;
    border: solid 1px black;
}

.hi:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 53px;
    left: 0px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playv 18s steps(6) infinite; 
}

@-webkit-keyframes playv {
     0% { top:   0px; }
   100% { top: 315px; }
}

.hi:after {
    content: "";
    position: absolute;
    width: 53px;
    height: 100%;
    left: 266px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playh 3s steps(6) infinite; 
}

@-webkit-keyframes playh {
     0% { left:   0px; }
   100% { left: 320px; }
}

Over the image, I display 2 pseudo elements, one is the row selector and the other the column selector. And I adjust the animations until they are ok

demo1

Now, lets verify that setting both animations at the same time works:

CSS

.hi {
    width: 320px;
    height: 315px;
    background-image: url("moon.jpg");
    position: relative;
    border: solid 1px black;
}

.hi:before {
    content: "";
    position: absolute;
    width: 53px;
    height: 53px;
    left: 0px;
    top: 0px;
    border: solid 1px red;
    -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(6) infinite; 
}

@-webkit-keyframes playv {
     0% { top:   0px; }
   100% { top: 315px; }
}

@-webkit-keyframes playh {
     0% { left:   0px; }
   100% { left: 320px; }
}

demo 2

And now the final project

.hi {
    width: 53px;
    height: 53px;
    background-image: url("http://i.stack.imgur.com/CjMscm.jpg");
    position: relative;
    border: solid 1px black;
    -webkit-animation: playv 6s steps(6) infinite, playh 1s steps(6) infinite; 

}


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

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

demo 3

All this for a webkit browser, remove prefixes for IE and FF. Also, in this approach it is imposible to avoid displaying the 2 blank images at the lower left corner. If you don't have a full grid, and don't want to display the empty images, you will need to specify all the keyframes one by one

这篇关于CSS动画与网格图像中的Spritesheets（不在一行）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！