Animation: jQuery VS CSS: jQuery lags, why? - jsFiddle comparison/example

JSFiddle

I have an example comparison of the exact same animation performed by 开发者_如何学GojQuery and another by CSS. The animation is so little, not much happening, so why is jQuery lagging like it is? This is ridiculous.... CSS is animating beautifully though.

Can someone tell me why jQuery animations lag, even when they're as small as this?

You must remove the CSS transition rules on the div animated by jQuery, in this example:

http://jsfiddle.net/mT39H/

Both behave the same.

The reason is that jQuery animates by changing the position x times per second, but then the browser tries to animate between these values.

I'd say it has to do with the ratio of paddingBottom to the animation time. Try changing animation time to a smaller value and you'll see it's a lot smoother.

(set to 75ms - link)