CSS3 vs. JQuery Transitions

Hey peeps! I’m working on my first theme and I was wondering how to add transitions to my theme. I’ve done some research and found out that CSS3 transitions are easier to implement and perform better too. Jquery, on the other hand provides better support for older browsers. Which one do you guys prefer? Most people at this day and age use the latest browsers. Is jquery really worth the slow speed and extra effort or should I go with CSS3 transitions? Thank you.

Hi, how about detectign old browser and when it is – using jQuery, otherwise using CSS3?

envp’s suggestion is a good one. You can test for it like this:

var supportsCssTransitions = canTransition(document.createElement("span").style);

function canTransition(style) {

    return "WebkitTransition" in style || 
           "MozTransition" in style || 
           "OTransition" in style || 
           "MSTransition" in style || 
           "transition" in style || false;

}

For me, I’d prefer CSS transitions over those powered by Javascript simply because they are more efficient. If you have too much of animations powered by Javascript / jQuery, the site will become slow, especially when you scroll through the page.

For me, if the animation is not something crucial, I’ll just ignore older browsers which don’t support CSS transitions. After all, having a fast, usable website is much better than a beautiful, sluggish website.

billyf said
For me, I’d prefer CSS transitions over those powered by Javascript simply because they are more efficient. If you have too much of animations powered by Javascript / jQuery, the site will become slow, especially when you scroll through the page. For me, if the animation is not something crucial, I’ll just ignore older browsers which don’t support CSS transitions. After all, having a fast, usable website is much better than a beautiful, sluggish website.

+1000

@chaman_matrix, the decision can’t be made without knowing what old browsers your theme should support. Since it is unavoidable supporting IE8 (in TF), you may need fallback with jquery or pure javascript:

billyf said
For me, I’d prefer CSS transitions over those powered by Javascript simply because they are more efficient.

CSS3 is certainly faster than JavaScript timers, but not always faster than requestAnimationFrame depending on the browser.

For me, if the animation is not something crucial, I’ll just ignore older browsers which don’t support CSS transitions. After all, having a fast, usable website is much better than a beautiful, sluggish website.

Totally agree. What good is an animation on IE8 if it runs like crap anyway.

Thanks a lot guys!