CSS中的平滑帧移动动画

Question

CSS中的平滑帧移动动画

3

我在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>

- Kelsey Abreu

你正在将 moveGirl 分配给 animation 属性，但是你已经将关键帧命名为 playGirl。 - Gabriele Petrioli

啊，是的，那是我为stackoverflow做的一个编辑，不想让人们有不同的想法。 - Kelsey Abreu

你能发布一个实时示例，以便我们可以进行调试吗？ - Gabriele Petrioli

@GabyakaG.Petrioli 我已经为您编辑好了。 - Kelsey Abreu

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- António Almeida · Accepted Answer

您需要移除动画中的steps属性；

 animation: moveGirl 3s steps(30) infinite;

steps(30)引起了问题。

示例：

Fiddle（没有步骤）
Fiddle（有步骤）

编辑

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

所以，因为您正在使用带有动画部分和位置动画的精灵图，您需要有两个动画。一个带有 steps(30) 和 background-position，另一个只有 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