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.

For a better cross-browser compatibility, consider also using the unprefixed and `-moz-` etc. versions of this code. — user2428118, Jun 02 '12 at 14:27
of course, i just use webkit here to make the code shorter in the post. Thanks for the reminder though ;p — John P, Jun 02 '12 at 14:28
@mgraph - jQuery may support IE for fades, but a lot of the time it looks awful because no matter how good jQuery is, it can't hide the fundamental limitations of IE. — Spudley, Jun 02 '12 at 15:53

score 37 · Accepted Answer · edited Feb 27 '17 at 22:55

37

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.

edited Feb 27 '17 at 22:55

Patrick James McDougle

2,072
18
24

answered Jun 03 '12 at 06:29

Madara's Ghost

172,118
50
264
308

If the browser doesn't support native animations then simply don't animate as they will look like crap :) – Esailija Jun 18 '12 at 08:07
4 answers and 3 of them less than -4?! I would say this was a **very** good question! – Shahbaz Jun 18 '12 at 08:30
CSS3 looks like the right place for clean animations code but many statistics prove that you are sometimes wrong when it comes to performance. – netAction Feb 22 '15 at 14:58
@netAction I'm not familiar with a case where jQuery outperforms native CSS animations. – Madara's Ghost Feb 22 '15 at 15:31

Raees Iqbal · Answer 2 · 2017-04-25T22:09:42.273

Well, I think using CSS animation is a lot better when there is a supported browser and you should use jQuery only as a backup for unsupported browsers. As thoroughly explained on http://dev.opera.com/articles/view/css3-vs-jquery-animations, they conducted test of animating 300 divs at the same time with both CSS and jQuery, and noticed a huge difference between the performance statistics.

Statistics using CSS the animation were:

and Statistics using jQuery were:

So, as you can see, there is a great difference between the performance. This is because the browser's CSS processor is written in C++ and native code executes very fast whereas jQuery (JavaScript) is an interpreted language and the browser can't predict JavaScript ahead in time very well, in terms of what event will occur next, which restricts browsers to optimize it for performance. I hope that answers your question.

Is it better to use jQuery fadeIn or CSS3 animations?

2 Answers2

Linked

Related