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.
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
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 :
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.
The setInterval method has a similar syntax as setTimeout:
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.
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.