Animation is a design tool which does not directly impact content but instead is used for visual cues and transitions from one UI element to another. For web design, animation is used to polish an already completed product. CSS and Javascript are two animation tools and both have pros and cons when it comes to functionality, overhead, and performance.
Functionality
In terms of functionality, CSS and Javascript are fairly similar. Both are able to do very impressive animations but it becomes more of a question of what exactly the animation needs to do. Animating using CSS is known as a declarative approach while Javascript is imperative. What this means is in CSS you must specify specifically what has to happen, while in Javascript you are able to programmatically define the animation.This means you have more control over an animation when using Javascript. For example, playing a complicated animation in reverse would be difficult in CSS as you would need to specify additional transition properties on every piece of the animation.
Overhead
Javascript and CSS have a key difference, which is overhead. CSS is the same in every development environment and it is simple to learn and fairly straightforward. Javascript, on the other hand, is almost the opposite. Although basic Javascript has animation functionality, most animation is done through an additional library such as GSAP or velocity.js. Developers who are familiar with one library may not be familiar with another, meaning much development time must be spent on training. Additionally, many development environments may be using another Javascript library such as JQuery for non-animation development, which will lead to conflicts as many Javascript libraries are not compatible. Therefore, when developing it is important to consider the overhead cost of Javascript libraries.
Performance
Performance is another important consideration, especially if developing on mobile platforms. CSS has fairly good performance as it offloads animation logic onto the browser itself. This lets the browser optimize DOM interaction and memory consumption and most importantly, uses the GPU to improve performance. On the other hand, Javascript performance can range from reasonably faster to much slower than CSS. Javascript performance depends on the library used and puts the burden on the developer to optimize. For example, JQuery is a commonly used library but is notorious for slow animation performance because it is not designed with animation in mind. Also, adding Javascript libraries creates more overhead and can increase page load times especially for mobile devices. There are lightweight libraries out there specifically for this issue, but lightweight libraries also have less functionality. As mentioned before, you may have to optimize performance which is completely dependent on the library being used. Using CSS or Javascript for animation is highly dependent on what you are trying to do. Javascript can be very powerful but is completely unnecessary if all you are doing is something like fading in a pop up window. Most of the time just using CSS is enough, but complicated animations can be difficult to do without using Javascript. If you decide to use Javascript, make sure to pick a suitable library which does not conflict with other libraries you may already be using.