在网格图像中使用Spritesheets的CSS动画(不是连续)

Question

我正在尝试为精灵图像设置动画,并找到了这个很好的例子:

博客:http://simurai.com/blog/2012/12/03/step-animation/(已经屈服于linkrot).
Wayback Machine:http
://web.archive.org/web/20140208085706/http: //simurai.com/blog/2012/12/03/step-animation/ Code Fiddle:https: //codepen.io/simurai/笔/ tukwj

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; } {background-position:-500px; }}

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

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

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

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

我想做同样的事情,但使用方形(功率或两个大小)图像图集而不是动画条.例如,这一个:

Answer 1

由于这可能是一项难以调试的任务,我想从相同的问题开始,但是在一个更容易调试的环境中.

我选择在整个图像上将其作为矩形动画.

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

<div class="hi">
</div>

在图像上,我显示2个伪元素,一个是行选择器,另一个是列选择器.我调整动画直到它们没问题

现在,让我们验证同时设置两个动画:

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

<div class="hi">
</div>

现在最后的项目:

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

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

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

<div class="hi">
</div>

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

Answer 2

请改用background-position-x 和background-position-y 属性。

\n\n

对于这张图片

\n\n

\n\n

尺寸 710px \xc3\x97 355px

\n\n

精灵帧大小为 118.333px X 118.333px，我们需要水平移动 6 帧和垂直移动 3 帧。

\n\n

这意味着我们需要创建两个单独的关键帧动画来遍历每个方向。当 x 方向动画正在播放时，其他动画必须冻结直到完成。

\n\n

另外 y 动画的持续时间必须是 3X。

\n\n

这是代码

\n\n

<div class="hi"></div>\n\n\n.hi {\n  width: 118.333px;\n  height: 118.333px;\n  background-image: url("http://www.fore6.com/wp-content/uploads/2011/09/henson11-hp-1g.png");\n  animation: playX 1s steps(6) infinite,\n             playY 3s steps(3) infinite;\n}\n\n@keyframes playX {\n  from {background-position-x: 0px;}\n  to {background-position-x: -710px;}\n}\n\n@keyframes playY {\n  from {background-position-y: 0px;}\n  to {background-position-y: -355px;}\n}\n

\n\n

在这里摆弄

\n