Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tomasz Sporys
Tomasz Sporys
11,258 Points

Is using CSS animations better than for example JQuery library in terms of performance?

Hi, guys. I'm taking course on treehouse on CSS transitions and animations. I have to admit I'm shocked how powerful CSS is! I thought that I can do all these type of things only by using JQuery(if we think about the easiest way). I have two questions regarding this.

  1. Like in the title, Is it better to create animations in CSS than JQuery in terms of performance? My first thought is yes, because it's built in your browser. Am I right?

  2. What is the most common practice among professional developers? Do they use more JQuery or CSS to create the same effect? BTW I like CSS Animations:)

3 Answers

Konrad Pilch
Konrad Pilch
2,435 Points
Konrad Pilch
Konrad Pilch
2,435 Points

Nice question!

I don't know but if you were to do a site that doesn't use jQuery, but you add it jsut for few animations, i think calling the whole jQuery would be bad for performance.

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

I'm inclined to agree with Konrad Pilch. Keep in mind, that jQuery and just JavaScript in general can do much more than just animations. So the question in my mind is are you going to be using jQuery enough (possibly for other things as well) to import that library? However, I don't work as a front-end developer so this is just my two cents.

Joey Ward
PLUS
Joey Ward
Courses Plus Student 24,778 Points
Joey Ward
Joey Ward
Courses Plus Student 24,778 Points

It's also possible for the end user to disable JavaScript on their browser, which would kill your JQuery animations. Additionally, CSS loads before the page is written to the screen. Your JQuery and animation functions might load after the page is written to the screen, depending on where they appear in the DOM. So an end user with a slow connection or a slow processor might find themselves interacting with elements on your page that should be animated, but the animations don't run because they are interacting with them before the browser is finished calling the JS functions. I vote for CSS.