Why are [my] CSS3 / jQuery transitions so imperfect, and how can I make them smoother?

Question

As much as I searched for information about this all over the Internet, I can’t find anything about it, so I came here for help.

What bothered me: no matter which method I use - jQuery.animate or css3 transition, [my] animations do not look perfectly smooth. At first I didn’t understand why they looked like that, and it was so subtle that I had to take a few shots to prove it. But it definitely is - the animations are just awful. Sometimes the frame is too fast, and sometimes too slow.

Turn it back and forth six or seven times, and you hopefully understand what I'm talking about.

I can figure this out with jQuery - JS execution is not perfect. A quick profiling shows that indeed, when using jQuery anim, some frames start too early, and some are delayed. But with CSS3?

What do people do to solve this problem?

Answer 1

Install this JS in front of your code:

jQuery.fx.interval = 100; 

Answer 2

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

The current version of this project is now full of images, text, frames, and still smooth.