17 posts
  • Collector Level 1
  • Exclusive Author
  • United States
  • 2 Years of Membership
chaman_matrix
says

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.

22 posts
  • Author Level 2
  • Collector Level 2
  • 4 Years of Membership
  • Exclusive Author
+1 more
envp
says

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

5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

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;

}
734 posts
  • Beta Tester
  • 3 Years of Membership
  • Author Level 6
  • Affiliate Level 1
+2 more
billyf
says

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.

20 posts
  • 2 Years of Membership
  • Collector Level 1
  • Exclusive Author
zatolab
says

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 :)

6231 posts
  • Exclusive Author
  • Elite Author
  • Author Level 8
  • 7 Years of Membership
+13 more
VF
says

@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:

http://themeforest.net/forums/thread/internet-explorer-8-compatibility-is-still-required/80910
5467 posts The Dude Abides
  • Top Monthly Author
  • Trendsetter
  • Weekly Top Seller
  • United States
+13 more
CodingJack
says

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.

17 posts
  • Collector Level 1
  • Exclusive Author
  • United States
  • 2 Years of Membership
chaman_matrix
says

Thanks a lot guys!

by
by
by
by
by
by