Debunking the Myth – CSS Animation is Better than JavaScript

Most of the developers in the web development industry believes in the myth that “CSS animation is one of the best ways to do animation on the web”. And because of this false belief many developers today favor CSS animation over JavaScript-based animation.
Earlier most of the developers used jQuery for animation, but with increasing project complexities and rise in the use of mobile devices, performance became the most crucial aspect. But jQuery wasn’t designed to deliver top-notch performance and was considered antiquated. However as browsers matured, a few solutions came to the fore such as CSS animations. Additionally, with the development of HTML5 the use of Flash lessened, and animators used HTML5 to perform several tasks that were not possible with the earlier HTML versions.

Due to slow speed of jquery developers prefer using CSS animation and avoid using JavaScript (also referred to as JS) animation. But, animating without JS coerce developers to handle complex UI interaction within style sheets, unable them to support older browser versions and deprive them of adding beautiful motion design that only JavaScript delivered.
What’s more? What some developers don’t know is that JavaScript-based animation could animate in the same speed as that of CSS-based animation – and it could be even faster. CSS animation appears to have an upper-hand over JavaScript animation only when it’s compared to jQuery’s $.animate() function – which is very slow. However, you can experience incredible performance by using JavaScript animation libraries instead of jQuery, as they’re 20 times faster compared to jQuery.
But this article isn’t about presenting the difference between JavaScript animation and jQuery, and instead it will focus on how using JS animations than CSS animations could be beneficial.

Let’s First Get Started With Basics – Why Use JavaScript?

CSS animations are useful for simpler property transitions within your style sheets. On top of that, CSS animations doesn’t require adding any libraries to your web page, so as to boost performance. But, managing rich motion designs using CSS transitions is difficult, as they don’t have enough features to support motion design (especially what you see in the Android and iOS mobile powered devices).
Working with CSS animations restricted control over animations. On the other hand, JavaScript provides unrestricted amount of logical control over your animations. Below is a list of animation effects that CSS animations can’t control:

• Some browsers let you pause or resume any animation built using CSS, but other than this function you don’t have control over other functions. For instance, you might not be able to seek some specific spot in the animation, or reverse part-way, or add callbacks at a few spots or restrict them to some playback events. But that’s all possible with JavaScript.

• Unlike JavaScript, CSS animations can’t add physics-based motion.

Additionally, JS can sometimes be a lot faster than CSS animations using its two most popular animation libraries – Velocity.js and GSAP. These libraries can function with or without using jQuery.
In case jQuery exists on your page, you need to use Velocity.js and GSAP similar to how you use jQuery’s $.animate(). For example, when you have the jQuery’s $.animate() function present in your page, defined as following:

$element.animate({ opacity: 0.6 });

Your Velocity library will be written as:

$element.velocity({ opacity: 0.6 });

You can even use the above two libraries without jQuery, as shown in the following code:

Working without jQuery

Velocity(element, { opacity: 0.6 }, 1000); // Velocity
TweenMax.to(element, 2, { opacity: 0.6 }); // GSAP

You can see that even without jQuery’s $.animate(), velocity has the same syntax; the only difference is that all the arguments are shifted on the right hand side by one position, so as to provide space for the targeted elements.
On the other hand, GSAP uses an object-oriented API design and static methods, in order to facilitate full control over animations.
As you can see in both of the above cases, you’re animating a raw DOM node instead of a jQuery element object. You can access the DOM nodes by using functions such as “document.getElementByID”, “document.getElementsByTagName”, “document.getElementsByClassName” or “document.querySelectorAll”.

So, What’s the Conclusion?

Probably, after reading this article you will be thinking that CSS animations are “bad”. But that’s not true, CSS animations are remarkably useful for performing simple transitions – when the animations don’t need to be compatible with older browsers (especially IE 9 and earlier versions). Plus, CSS animations are useful for developers who generally keep their presentation logic in the CSS layer. In fact, they’re appealing than jQuery $.animate() which makes the animation run too slowly. But JavaScript libraries like Velocity and GSAP can help boost your animation performance even more than CSS-based animation. Also, JS is more flexible in comparison to CSS animations.
Put it simply, CSS animations are no doubt faster than jQuery. But, on most of the devices and even browsers, JavaScript-based animations performs better compared to CSS animations.