Is it better to use jQuery fadeIn or CSS3 animations?

Question

I am creating a simple gallery using some PHP and JavaScript and am trying to do a fade transition between images. Then I wondered if there is a performance difference between using a CSS animation, e.g.:

@-webkit-keyframes fadeIn {
0%   { opacity: 0; }
100% { opacity: 1; }
}

and a jQuery fadeIn.

I would like to use the callback from the fadeIn but I also can just use a timer with the CSS I guess.

Are either of these likely to work better with large images? I can't see a difference, but wondered if it might affect slower computers.

Answer 1

How about one with a fallback to the other? Use CSS3 transitions where possible, and use a feature detection library such as Modernizr to determine if the user's browser is capable of CSS3 transitions.

If AND ONLY IF the user's browser does not support native animations, only then should you use jQuery.

Native animations are GPU accelerated, resulting in less constraint on the CPU, and much smoother animations. Also, IT DOESN'T REQUIRE JAVASCRIPT nor does it take extra requests to pull off.