生涩的动画-Jquery / CSS3

Question

I am trying to combine jQuery and CSS3 to give smooth animations, but I am still finding the animations can be jerky, even on desktop.

I am using the below to move my id from off the side of the page onto the page.

$(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)");

Can anyone give any advice if there is anything further I can do?

Answer 1

Use a plugin/extension like velocity to automatically use CSS animation for you behind the scenes.

We recently used it to avoid stuttering of animations on mobile devices and it improved things a lot.

Answer 2

If you want smoother animations and you can use CSS3 with no restrictions then you can make use of CSS3 Keyframes.

Take a look at this CSS3 animation collection called Animate.css:

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

This makes use of CSS3 Keyframes that runs really smooth. You can edit the animations or create new ones depending on what you want to acomplish. With Keyframes you can set the state of the animation at any frame of it so you can make it look as smooth as you want depending on how you build it.

Take a look at this article about Keyframes and if you don't want to use the ones on Animate.css try to modify them or build your own:

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

For the animmation you want to get the code is not that hard. You can do this with jQuery animate as well but Keyframes will runs smoother if you work better on the frames.