Question

我在javascript / css中使用精灵表，我想做的事情是使用相同的3帧（精灵行走）无限次，直到它达到100％标记。

这就是我在css中所做的事情：

.WomenAnimation{
    animation: moveGirl 3s steps(30) infinite;
    -webkit-animation: moveGirl 3s steps(30) infinite;
    -moz-animation: moveGirl 3s steps(30) infinite;
    -ms-animation: moveGirl 3s steps(30) infinite;
    -o-animation: moveGirl 3s steps(30) infinite;
}

@keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

@-webkit-keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

@-moz-keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

@-ms-keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

@-o-keyframes moveGirl {
   from { background-position: -600px; left:240px}
     to { background-position: -1200px; left:750px}
}

所以你可以看到我试图在3秒内将它移动到屏幕上，试图让它看起来很流畅，但我得到的是精灵传送和做一些奇怪的动作。

编辑：

这是女性精灵，所以你可以尝试将她移过div。除了html中的div和随之而来的一些css。

#bg{
    width:640px;
    height:500px;
}

#WomenSprite{
    overflow:hidden;
    width:200px;
    height:200px;
position:absolute;
background-image:url("http://imageshack.com/a/img14/3948/z5pt.png");

}

<div id="bg">
    <div id="WomenSprite"></div>
</div>

Answer 1

您需要删除动画的steps属性;

 animation: moveGirl 3s steps(30) infinite;

steps(30) 导致问题。

示例：

Fiddle (no steps)
Fiddle (steps)

修改

感谢 @Gaby aka G. Petrioli 指出真正的问题。

因此，当您使用带有动画部分的精灵以及位置动画时，您需要有2个动画。一个包含steps(30)和背景位置，另一个包含div动画。

这样的事情：

.WomenAnimation { -webkit-animation: moveGirl1 3s linear infinite , moveGirl2 3s steps(30) infinite ; } @-webkit-keyframes moveGirl1 { from { left:240px; } to { left:750px; } } @-webkit-keyframes moveGirl2 { from { background-position: -600px; } to { background-position: -1200px; } }

这种方式moveGirl1将是线性的和流畅的，而moveGirl2将是阶梯式的，因为它是精灵位置。

以下是最终的代码：

<强> FIDDLE

在css中平滑帧移动动画

1 个答案:

修改