Javascript 急动动画-Jquery/CSS3

我试图将jQuery和CSS3结合起来，以提供平滑的动画，但我仍然发现，即使在桌面上，动画也可能不稳定

我正在使用下面的将我的

id

从页面一侧移到页面上

$(id).addClass('active').css({ left: pageWidth })
                        .animate({left: 0}, 500, function(e){deferred.resolve()})
                        .css("-webkit-transform", "translate3d(0px,0px,0px)")
                        .css("-moz-transform", "translate3d(0px,0px,0px)")
                        .css("-ms-transform", "translate3d(0px,0px,0px)")
                        .css("-o-transform", "translate3d(0px,0px,0px)")
                        .css("transform", "translate3d(0px,0px,0px)");

---

如果我还有什么可以做的，有人能给我一些建议吗？

使用一个插件/扩展，比如在后台自动使用CSS动画

---

我们最近使用它来避免移动设备上的动画出现口吃，并且它改进了很多。

如果您想要更平滑的动画，并且可以不受限制地使用CSS3，那么您可以使用CSS3关键帧

看看这个名为Animate.css的CSS3动画集合：

这使得CSS3关键帧的运行非常平滑。您可以编辑动画或创建新的动画，具体取决于您想要完成的内容。使用关键帧，可以在动画的任何帧上设置动画的状态，以便根据构建方式使其看起来尽可能平滑

看看这篇关于关键帧的文章，如果您不想使用Animate.css上的关键帧，请尝试修改它们或构建自己的关键帧：

---

对于你想要的动画来说，代码并不是那么难。使用jQuery animate也可以做到这一点，但如果对帧处理得更好，关键帧将运行得更平滑。

添加

translate3d（…）

不会改变这样一个事实，即您的代码仍然使用

setTimeout

执行动画-jQuery执行动画的方式。你应该在谷歌上搜索css3动画教程，作为一个提示，你可以查看旁注：你可以将多个CSS设置组合成一个对象，避免函数调用开销：例如

.CSS（{“-webkit transform:“translate3d（0px，0px，0px）”，“-moz transform:“translate3d（0px，0px，0px）”，