Basically let’s start with the main question and later we will see what they are individually. So,
What is animation?
Animation is known as a process or also we can call it a technique, through which it makes things look more appealing, lively and attractive. So basically, it is a method of manipulation by which we make the content actually move. Animations are very much needed in our web applications to make them look attractive which ultimately brings more viewers to an application. So in web applications, animations on HTML elements can be achieved either through CSS or Javascript. Thus, one can say that there are two types of animations. They are,
- CSS Animations
- Javascript Animations
So which one we are going to choose for a web application completely depends on the type of animation effects we are aiming to achieve and when we need that effect. So firstly, let us see what they are, individually.
CSS Animations
In a web application, animations on the HTML elements through CSS, can be achieved by CSS Transitions or CSS Animations.
CSS Transitions
CSS Transitions allow you change the property values of an element smoothly, over a given time duration. To create a transition effect, all we need to specify is about two things. One is the CSS property to which the effect is going to be added and other is the time duration of the effect cause if you don’t mention the time duration no transition will occur because default value taken is 0s. For example,
HTML Code:
|
Corresponding CSS:
|
So in the above example we would be getting an output like, there will be a blue color box of width and height of 100 pixels each which will keep rotating by 90 degrees in a duration of 2 seconds whenever it is being hovered.
View the same here: https://codepen.io/Tejveer18/pen/LYVoNor
Similarily, we can also change multiple property values at a time. For example,
HTML Code:
|
Corresponding CSS:
|
Thus, in this example we would be getting an output like, there will be red box of width and height 100 pixels each initially, and when hovered the the width would increase to 300 pixels in a duration of 2 seconds and the height would increase to 600 pixels in a duration of 4 seconds.
View the same here: https://codepen.io/Tejveer18/pen/eYNazOR
This is how transition works which is also a kind of animation to a HTML element. These are the list of all the CSS transition properties we can use.
Property | Description |
---|---|
transition | It is a shorthand property for setting the transition properties into a single property. |
transition-delay | It specifies a delay (in seconds) for the transition effect |
transition-duration | It specifies how many seconds or milliseconds a transition effect takes to complete |
transition-property | It specifies the name of the CSS property the transition effect is for |
transition-timing-function | It specifies the speed curve of the transition effect |
The CSS transition properties for a specific HTML element having a class name as “class-name” can be specified one after the other this way:
|
or by using the shorthand property transition, like this:
|
CSS Animations
A CSS animation lets an element gradually change from one style to another by changing the element properties. We can change those properties as many times as we want. To use CSS animation, we must first specify some keyframes for the animation. First of all let us understand what keyframes are.
@keyframes Rule
Keyframes hold what styles the element will have at certain times. We mention all the styles within the @keyframes rule, i.e., within the keyframes we can mention at what point of time of an animation what all styles (element properties) the element should have. Also for an animation to work, we must bind it to an element. Don’t worry we will go through an example to understand this clearly.
HTML Code:
|
Corresponding CSS:
|
So, in this example we would be getting an output like, initially there would be red box with width and height 100 pixels each and on completion on 25% of animation i.e., after 1 second, the size of the box gradually increases to 150 pixels (both width and height) and it’s color changes to blue. Again on completion of 50% of the animation, i.e., after 2 seconds, the size of the box gradually decreases to 100 pixels (again both width and height) and it’s color changes to green. Now after 3 seconds, i.e, after completion of 75% of the animation, the size of the box gradually increases to again 150 pixels and it’s color changes to yellow. After 4 seconds, i.e, after the completion of animation-duration, the box regains it’s intial styles.
View the same here: https://codepen.io/Tejveer18/pen/mdJYEyg
Similar to transition-duration, iproperty is not specified, no animation will occur, because the default value is 0s. And basically, when the animation is completed the element returns to it’s inital styles, unless and until we mention the animation-iteration-count property as infinite.
The list of all the CSS animation properties along with the @keyframes rule, are mentioned in the below table:
Property | Description |
---|---|
@keyframes | It specifies the animation code |
animation | It is a shorthand property for setting all the animation properties |
animation-name | It specifies the name of the @keyframes animation |
animation-duration | It specifies how long time an animation should take to complete one cycle |
animation-direction | It specifies whether an animation should be played forwards, backwards or in alternate cycles |
animation-iteration-count | It specifies the number of times an animation should be played |
animation-delay | It specifies a delay for the start of an animation |
animation-fill-mode | It specifies a style for the element when the animation is not playing (before it starts, after it ends, or both) |
animation-play-state | It specifies whether the animation is running or paused |
animation-timing-function | It specifies the speed curve of the animation |
The CSS animtation properties for a specific HTML element having a class name as “class-name” can be specified one after the other this way:
|
or by using the shorthand animation property, like this:
|
For more deep understanding of the properties and their examples, view this: https://www.w3schools.com/css/css3_animations.asp
Now that we have seen what basic CSS animations are let’s dive into Javascript animations.
Javascript Animations
Javascript animations are basically those through which we can achieve, what we couldn’t with just CSS animations. JavaScript animations are for advanced effects like boune, stop, pause, rewind, or slow-down. These advanced effects are based on the idea that we can animate by moving DOM elements around the page according to a pattern determined by a logical equation or function, which is not possible with CSS animations.
For instance, changing style.left from 0px to 100px moves the element, but not smoothly. So if we increase it in setInterval changing by 1px with a small delay, like 40 times per second, then it will look smooth.
The pseudo-code can look like this:
|
Now let’s take a look at an example, like how this idea can be more useful. Imagine there’s an image and it moves when we click a button and stops when we click an another button. This cannot be achieved by just CSS Animations, hence we use Javascript here. So here goes the code,
HTML Code:
|
Corresponding CSS:
|
Corresponding Javascript:
|
A quick demo of the above basic example, please view this: https://codepen.io/Tejveer18/pen/abOrmLo
For few more timing functions and examples you can view this: https://javascript.info/js-animation#timing-functions. This will give you a brief idea on how well you can use javascript animations.
For more complex animations, like when several animations are running simultaneously, to maintain them we use an inbuilt function requestAnimationFrame. For more idea on this, view: https://javascript.info/js-animation#using-requestanimationframe
There are also a lot of frameworks that can be used to handle Javascript animations. Few of them are jQuery, Velocity, WebGL, GreenSock etc.
Conclusion
So basically we use both CSS animations and Javascript animations in our daily web applications and as earlier said, which one we are going to choose for a web application completely depends on the effects we are aiming to achieve and what time we need that effect.
- Use CSS animations for simpler transitions, like one-shot transitions. For example, we can say like toggling UI element states.
- Use JavaScript animations when you want to have advanced effects like bounce, stop, pause, rewind, slow-down or if you need a control of when and what to animate.
- Use a modern framework that you’re comfortable with, for animating with Javascript more.
So hereby I conclude saying that, in any web application to make it a treat to the eyes of a viewer, animation is a must. Thus, it is not CSS animations versus Javascript animations, but CSS animations and Javascript animations.