为什么[my] CSS3 / jQuery转换得如此不完美，如何使它们更加流畅？

Question

As much as I've searched for information about this all over the internet, I can't find anything about it, so I've come here for help.

What's been bugging me: That no matter which method I use -- a jQuery .animate, or a css3 transition, [my] animations don't appear to be perfectly smooth. I didn't understand why they appear this way at first, and it's so subtle I ended up having to do some video capping to prove it. But it's definitely there -- the animations are juttery. Sometimes a frame happens too fast, and sometimes too slow.

Flip it back and forth six or seven times, and you'll hopefully see what I'm talking about.

I can understand this with jQuery -- JS execution isn't perfect. A quick profiling shows that indeed, when using jQuery anim, some frames get triggered too soon and some frames are late. But with CSS3?

What do people do to solve this problem?

Answer 1

在代码之前设置这个JS：

jQuery.fx.interval = 100;

Answer 2

I am moving the container using the margin-left CSS property and .animate of jQuery and is pretty smooth. Use the arrow keys to use it (left and right)

The current version of that project its now full of images, text, iframes and is still smooth.