使用 CSS3 动画 Sprite 网格？

Question

我有这个示例精灵网格 sheet，我需要运行对其进行动画处理。我能够达到某个点，但正在努力使其完美。动画不是那么流畅，而且图像没有正确对齐。在动画期间，您可以看到图像元素未与视图中的其他元素居中。到目前为止，这是我的 HTML 和 CSS3 代码。

.hi {
    width: 910px;
    height: 340px;
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
    position: relative;
    -webkit-animation: playv 12s steps(6) infinite, playh 2s steps(4) 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%; }
}

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

Fiddle: http://jsfiddle.net/bf5ckdv9/

Answer 1

我添加了背景尺寸样式，并重新排列了您的一些属性

结果差不多就可以了；但是你的精灵网格似乎出了问题

.hi {
    width: 910px;
    height: 340px;
    background-image: url("https://simba-heroku.imgix.net/animation-homepage-tablet-retina.jpg?auto=format,compress");
    position: relative;
    animation: playh 2s steps(5) infinite, playv 10s steps(5) infinite; 
    border: solid 1px blue;
    background-size: 500% 500%;
    background-repeat: no-repeat;
}

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

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

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

使用 CSS3 动画 Sprite 网格？

Animate a Sprite grid using CSS3?

html

css

animation

sprite