Animation

Animations, when implemented well, can enhance the way users interact with your UI; revealing certain actions when the user needs them, communicate digitally, improve the user experience and lead to better conversions. Animations like fade effects, hover effects, loading effects, parallax scrolling, text animations, and transitions are all types of standard browser animation.

Animations in browsers are created by programming gradual changes in an element’s style. It is visualised when timers are used to cause a continuous or gradual change in a DOM element. You might have noticed that some developers use either CSS and Javascript to create animations. The difference between the two is that, CSS animations require the use of CSS properties, whereas the Javascript approach uses functions.
You may be wondering whether to use CSS or Javascript animations, however, it really depends on what you want to achieve. When assessing the two options, browser performance, time accuracy, and browser compatibility are the most essential factors. JavaScript animations are not optimised for browsers, as such, it is better to use CSS animations. On the hand, CSS animations are wonderful for browser efficiency, but pretty restrictive when you want to produce more sophisticated animations.

With the good old KISS principle in mind, consider your options and keep it simple; for simple animations, go for CSS properties and use Javascript functions for advanced animations.

CSS Animation

Since CSS animations are better optimised for browsers and perform better compared to Javascript, developers can take advantage of pre-defined attributes that make implementation easier.
For this to be implemented in CSS, an element requires the @keyframe at-rule to work hand in hand. Some sub animation properties are animation-delay, animation-direction, animation-duration, etc, however it is common to see the shorthand, i.e, animation used for all of these sub-animation features. Along with the animation property, @keyframes at-rule is used to create a sequence. The animation property defines the element in the DOM and the @keyframes, defines specific timings during the animation.
Although aspects such as the background, height cannot be animated, there are a wide variety of properties listed here that can be animated. You can also explore more CSS properties that can be animated here: Canianimate

Javascript Animation

Javascript animations can be used to handle the complex parts of animations that cannot be done with CSS properties. This article presents a practical example of such complex animations. They are done by creating gradual animation in an element’s style using a sequence of frames. Javascript methods used in creating animations are setTimeout, setInterval and requestAnimationFrame.

setTimeout

The setTimeout method is used to make a controlled call of a function after a delay defined in milliseconds. The syntax for this method is :

setTimeout(function, duration) 

Common use cases for setTimeout is :
to set a delayed function call before the execution of a function
to remove a blocking function from the call stack
as a quick mock for an async operation

Note that if the browser is busy and not ready to take the next execution cycle, setTimeout will run later than expected. In other words, if there are other executions in the call stack that are blocking the minimum set time, there will be further delay in executing the function. Let’s expand on this, for example, if you create a setTimeout function set to be delayed by 2000ms, it is not always guaranteed that the callback method will be executed exactly after 2 seconds. The execution of the callback is dependent on the call stack of your codebase.

setInterval

The setInterval method has a similar syntax as setTimeout:

setInterval(function, duration) 

However, compared to setTimeout, setInterval runs its function repeatedly after a given period of milliseconds. Another alternative in creating repeated timing is to use a nested setTimeout which is known to be a more flexible alternative.
Because the setInterval function executes function calls repeatedly at specified intervals, it is often advised to use the clearTimeout function to cancel the scheduled function after it has been executed. Using the clearTimeout method prevents an endless call to the function. Bear in mind that, with setTimeout, using clearTimeout may only be necessary for canceling timeout, but often not necessary because the function only runs after one call. Hence, it is more practical to use clearInterval instead of setInterval.

requestAnimationFrame

Before requestAnimationFrame was introduced, setInterval and nested setTimeout methods used to be the only way to create a timed loop in Javascript. Now, the standard approach for animations is to use requestAnimationFrame because of its tendency to create higher quality animation. The method needs a callback to be invoked before the next repaint like so:

requestAnimationFrame(callback)

Compared to setInterval and setTimeout, requestAnimationFrame eliminates flicker, shear, it also removes frame skips and makes animations smoother. Hence, it allows the browser to optimise concurrent animations in a single reflow and repaint cycle.
One reason why requestAnimationFrame is recommended is that, if you happen to have more than one animation running simultaneously and separately with setInterval, the browser is likely to repaint more than every specified ms. Additionally, requestAnimationFrame schedules the callback function to run in the closest time when the browser requests animation. As a result, instead of many updates and repaints, there will be a single function call to update an animation and repaint. This means animations in inactive tabs will not run, thus resulting in less CPU, GPU and memory usage.