CODEWITHSUNDEEP
jquerycss
NullVoxPopuli
NullVoxPopuli

Reputation: 65103

Is there any advantage to using CSS animations over jQuery animations? (performance, or otherwise)

I mean, CSS animations are cool, but CSS3 compliance is annoyingly un-standard. but, ignoring all the issues with browsers and their inability to be up-to-date with the latest W3C,

Is there some sort of performance advantage over jQuery animations?

Why are they being implemented?

Upvotes: 7

Views: 2128

Answers (6)

Suchal
Suchal

Reputation: 209

the best advantage is that it works very smoothly in iPad, iPhone, Android as well as in Safari mac due to hardware acceleration. jquery animations are not smooth on mobile devices. In future CSS animations would get buttery smooth as they are standard but jquery would remain the same. It is more future proof to use these

Upvotes: 0

Madara's Ghost
Madara's Ghost

Reputation: 174957

As a general rule of thumb, whenever JavaScript can be avoided and the same result achieved, it should be avoided.

It's always preferred to use the native browser abilities as it will usually be better performance-wise, plus it will generally look better.

Additional points:

  • jQuery animations are not real animations, they are faked, while the native CSS3 browser animations are in fact, animations. As a result native CSS3 animations can be accelerated by the GPU, whereas jQuery animations cannot.
  • Do note that not all browsers support CSS3 animations/transitions. You would probably want to test if the browser supports it, and act accordingly.

Upvotes: 5

Carole
Carole

Reputation: 135

To all the people who think Javascript is better for browsers that are older, that's not necessarily true. Thinking about Andy Clarke's take on this, it seems like it's easier to tell an elegant story with good, accessible fallbacks using solid semantic markup and CSS3 than it is with Javascript.

http://forabeautifulweb.com/blog/about/its_a_mad_mad_mad_mad_manimation/

Upvotes: 1

Steve Adams
Steve Adams

Reputation: 2837

CSS animations can be accelerated by the GPU, whereas Javascript animations aren't. If You know without a doubt that your user base will have support for the css version of your animations, it makes a lot of sense to choose css.

In the case that you need to support older browsers, javascript is the right call.

Upvotes: 1

GregM
GregM

Reputation: 2654

But css animation are not suported by every browser, it's an important issue depending of your public.

Upvotes: 0

dontGoPlastic
dontGoPlastic

Reputation: 1782

CSS animations have the benefit of potentially being hardware accelerated. Here's a demo of Scripty2 (I know, it's not jQuery - but same principles) that demonstrates this very well.

http://scripty2.com/hardware-acceleration/

Upvotes: 2

Related Questions