All geek questions in one place

CSS animation vs jQuery animation

I almost always use jQuery animations for any web projects I'm working on, but I was wondering how CSS animations are different. I know the syntax is different (obviously), but what are some of the features that CSS animations have that jQuery does not and vice versa. What are the pros and cons of each? Do they have improved functionality? How effective are each?

+6
source share
2 answers

CSS3 animation performance is competitive with JavaScript, but not necessarily superior. On this page, you can test several browser animation methods and see the actual differences.

https://greensock.com/js/speed.html

CSS3 animations are executed in a separate thread than JavaScript, so it doesn’t block it very much. Therefore, CSS3 is best if your application has some load on it.

http://www.phpied.com/css-animations-off-the-ui-thread/

CSS3 animations are also often accelerated by hardware (the animation runs on the GPU instead of increasing processor performance). But there are so many JavaScript animation tools.

This is mainly technically. The coding style is wise, they also have some big differences. CSS3 animation invocation usually occurs by adding and removing dom classes from JavaScript. Thus, the behavior of your component ends up living between 2 files and in two languages. All of this can be circumvented, but it can make the code harder to reason about.

So, if you decide to go with CSS3 animations, I recommend not doing this in css, but using a JavaScript library that allows you to save CSS3 animations in JavaScript. Or you can only select a JavaScript animation library such as GreenSock. In any case, I recommend storing animations in JavaScript for workflow and ease of understanding.

+7
source

I think the main pro is that the CSS animation is native. This means that they are going to call the compiled code inside the browser and probably use any hardware acceleration that is available. This means CSS3 animations will be faster and less memory.

Here is an interesting post on this topic from the developers of the Opera browser: https://dev.opera.com/articles/css3-vs-jquery-animations/

+2
source

Source: https://habr.com/ru/post/978592/

More articles:


All Articles