Question

我正在尝试将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)");

如果还有什么可以做的话，有人可以给出任何建议吗？

Answer 1

使用像velocity这样的插件/扩展程序在幕后自动使用CSS动画。

我们最近使用它来避免移动设备上的动画卡住，并且它改进了很多东西。

Answer 2

如果你想要更流畅的动画，你可以使用没有限制的CSS3，那么你可以使用CSS3关键帧。

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

http://daneden.github.io/animate.css/

这使得CSS3关键帧运行得非常流畅。您可以根据要实现的内容编辑动画或创建新动画。使用关键帧，您可以在任何帧处设置动画的状态，以便根据您的构建方式使其看起来如此平滑。

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

http://css-tricks.com/snippets/css/keyframe-animation-syntax/

对于你想要获得代码的动画并不那么难。您也可以使用jQuery动画执行此操作，但如果您在框架上工作得更好，Keyframe将运行得更顺畅。

生涩的动画 - Jquery / CSS3

2 个答案: