Question

我有这个样本精灵网格表，我需要运行和动画。我能够达到某一点，但努力使其完美。动画不是那么平滑，另外，图像没有正确对齐。在动画期间，您可以看到图像元素不以视图中的其他元素为中心。到目前为止，这是我的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>

小提琴：http://jsfiddle.net/bf5ckdv9/

Answer 1

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

结果几乎可以;但你的精灵网格似乎无序

＆＃13;

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

＆＃13;

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

＆＃13;

使用CSS3为Sprite网格设置动画？

1 个答案: