javascript-在CSS中平滑移动动画

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript-在CSS中平滑移动动画，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2076字，纯文字阅读大概需要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}
}

因此,正如您所看到的,我试图在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>

解决方法:

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

 animation: moveGirl 3s steps(30) infinite;

步骤(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

内容总结

以上是互联网集市为您收集整理的javascript-在CSS中平滑移动动画全部内容，希望文章能够帮你解决javascript-在CSS中平滑移动动画所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端