CODEWITHSUNDEEP
jquerycss
codepuppy
codepuppy

Reputation: 1140

CSS3 Transitions v jQuery Animations - robust approach?

This question has been asked before but in relation to performance. The SO answers omit issue of implementing on IE.

I accept that CSS3 Transitions are faster than jQuery animations.

However I note that CSS3 runs into problems with IE 6-8 and would therefore require the use of a plugin like ie9.js or select[ivizer]. Both of which have varying write ups both on SO and elsewhere.

Therefore I would like clarification here. It is my understanding that jQuery animate will normalise across browsers and versions thereof.

Thus even looking back to ie-8 is best advice to use jQuery regardless of any hit in terms of speed?

Upvotes: 1

Views: 1101

Answers (4)

Santosh
Santosh

Reputation: 1056

you can use .animate(), it is little difficult but I found one plugin which makes your work easy.

cycle plugin

This plugin gives you smooth transitions. I checked in IE 9 and it works fine.

Upvotes: 0

Rich Bradshaw
Rich Bradshaw

Reputation: 72975

Use CSS transitions whenever possible, use jQuery animate on older browsers, or where things are getting too complex to easily implement transitions.

CSS Transitions are not changing anymore (not that they ever have since inception) as they are implemented without prefixes in some browsers.

If you like the way jQuery animate works, a drop in replacement is found here:

http://playground.benbarnett.net/jquery-animate-enhanced/

This intelligently uses transitions where possible, meaning you can write jQuery as usual, but you get the benefit of nicer animations in new browsers.

In my experience, that plugin works really well sometimes, and ruins things completely every now and then – you should test carefully that the CSS transitions version looks correct before using in production. (Things like jQuery Cycle break for instance on some animations)

Upvotes: 1

Rosmarine Popcorn
Rosmarine Popcorn

Reputation: 10967

Well jQuery animates element's using window.setTimeout(); where you can get 60 FPS in best cases.

And that's not good enough, while CSS3 uses Hardware Acceleration for animations .

If think you should not get stucked on jQuery Animation .

User moderinzr to check for CSS Transition's and than use CSS3.

Than if CSS3 is not supported i think TweenMax is better aproach for animation than jQuery .

PS : i would suggest you to read this article.

Upvotes: 1

Rodik
Rodik

Reputation: 4092

This is somewhat a matter of personal opinion and personal needs,

My recommendation is to stick with jQuery if cross browser support is a concern, seeing as CSS3 is still changing rapidly across browsers. Although CSS3 does prove faster at various benchmarks.

Alternatively, you can use specialized plugins that use CSS3 transitions and fallback to animate when an unsupported property is found, a good one would be jQuery Transit, although it does not have the complete solution for all needs.

Upvotes: 1

Related Questions