javascript - css中平滑的帧移动动画

Question

我在 javascript/css 中使用 Sprite 表，我想做的是无限次使用相同的 3 帧( Sprite 行走)，直到达到 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 秒内将它移过屏幕以使其看起来平滑，但我得到的是 Sprite 传送并做了一些奇怪的 Action 。

编辑:

这是女性 Angular 色，您可以尝试将她移过 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 指出了真正的问题。

因此，当您使用带有动画部分的 Sprite 和位置动画时，您需要有 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 将是步进的，因为它是 Sprite 位置。

---

这是最终的代码:

FIDDLE