我在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}
}
如你所见,我正尝试在三秒内将其从屏幕一侧移动到另一侧,使其看起来更加流畅,但是我得到的效果是精灵瞬移到目标位置并做出一些奇怪的移动。
编辑:
这里是女性精灵,你可以尝试将她移动到 div 上。除此之外,还有一些与之相关的 HTML 和 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>
moveGirl
分配给animation
属性,但是你已经将关键帧命名为playGirl
。 - Gabriele Petrioli