Introduction
CSS animation is quickly growing to become an essential tool for web developers. While working on a project, I got a requirement from the client to create complex eye-catching animation. It was for a splash screen consisting of four informative cards, animating from left to right on page load. To put it another way, it had to reveal the elements one by one playfully and creatively, making things much more interesting.
To get this animation right, we had two options, either use Javascript or CSS.
Both can do impressive animations. However, we had to choose the one that suits the purpose. Thereupon we started to think of some key differences that we can consider as parameters to find the winner of Javascript vs. CSS animations:
Resilience
CSS rules are easy to write and maintain compared to Javascript. One broken CSS rule will not break the whole layout, whereas a single syntax error in Javascript may crash the complete web application or force the user to reload the page.
Functionality
In terms of functionality, CSS and Javascript are reasonably similar.
Although Javascript animations provide significant control over animations – pause, stop, revert, run asynchronously one after another, place on a timeline and schedule.
Performance
Performance is another important consideration when you have plans to develop your program on mobile platforms. All in all, CSS has relatively good performance as it offloads animation logic onto the browser itself due to which it 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.
Optimization
CSS animations are better from an optimization perspective. In fact, they run on the GPU, so the frame rate is much higher than that of Javascript animations. On the positive side, CSS animations do not causing reflows and redraws, unlike modifying elements via Javascript.
These factors were my primary concerns. CSS animation was more suitable for my project because it provides complete control over the animation using just one keyframe.
Moreover, to work with keyframes, we needed support from the following CSS properties:
Transform
CSS Transform allows CSS elements to be transformed in two-dimensional or three-dimensional space – from moving the element to re-sizing it, from rotating the element to tilting it, without changing the document flow. When an element changes states, it triggers Transform, such as on mouse-hover or mouse-click.
There are four significant aspects of transforms:
translate: The translate() function allows us to move an element across the plane (on the x and y-axis).
scale: The scale() function allows us to resize an element. We can either expand or shrink it.
rotate: The rotate() function allows us to make an element revolve around a fixed point. By default, it revolves around the element’s center.
Skew: The skew() function allows us to distort an element, by dragging its sides along a line.
Transition
As the name suggests, transition lets you control the transformation of elements. It helps in making the process smooth and gradual. On the flip side, if you don’t have it, the element being transformed would change abruptly from one form to another. What’s more, it is widely used for simple animations and can be applied to most of the CSS properties.
A complete list of CSS properties that can be animated using transition can be found here.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties
Animation Properties
Transitions animate the transformation of a CSS element from one state to another. But for more complex animations which require animating multiple elements with state dependency, we can use animation properties.
Creating CSS animations using animation properties is a two-step process, and requires keyframes and animation properties.
The @keyframes At-Rule
Keyframes are used to specify the values for animating properties at various stages of the animation. Keyframes are specified using a specialized CSS-at-rule — @keyframes.
/* Standard syntax */
@keyframes animate {
from {top: 0px; background: green; width: 100px;}
to {top: 200px; background: black; width: 300px;}
}
To ensure optimal browser support for your CSS keyframes, you should define both 0% and 100% selectors:
/* Standard syntax */ @keyframes animate { 0% {top: 0px;} 25% {top: 200px;} 75% {top: 50px;} 100% {top: 100px;}
}
We can create complex animation properties by using the @keyframe. A simple animation has two keyframes, while a complex animation has several keyframes.
The complete list of sub-animation properties can be found at:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation
Let’s start working on our requirements. To start with, let’s create a basic card-based layout.
Step 1
We will create a simple 2 cards layout and we will add the animation in step 2 using keyframes. Since we can easily apply transition on CSS ‘position’ property, we can use it to place the elements as required.
https://codepen.io/pen/NWbBrRb
Step 2
Now that we have the card-based layout ready, let’s add some animation to it.
First, we need to hide the cards using opacity: 0 so that the cards are not visible before the animation.
Now, let’s add keyframes for the animation name.
@keyframes card-animation {
from {
opacity: 0;
left: 0;
}
to {
opacity: 1;
}
}
Since we have already defined the left property in class .card before, we can skip that in keyframe card-animation.
Step 3
Now our keyframe is ready, let’s add it to the .card class along with the animation-fill-mode.
animation: card-animation 1s;
animation-fill-mode: forwards;
We will have to add delay to animate the cards one by one.
.card-1 {
animation-delay: 2s;
}
.card-2 {
animation-delay: 3s;
}
That’s it! With the above simple code, we have with us the working card animation.
https://codepen.io/pen/ExNpyBz
Step 4
To update it as per our requirement, let’s add 2 more cards to it and apply the same animation-delay as we have used in the previous step.
.card-3 {
animation-delay: 4s;
}
.card-4 {
animation-delay: 5s;
}
Let’s see how it works.
https://codepen.io/pen/zYoLOYo
Conclusion
To sum up, use CSS animations for simpler “one-shot” transitions, like toggling UI element states. Besides, it is easier to use than JavaScript as it allows you to make some impressive animations from the users’ point of view. Use JavaScript animations when you want to have advanced effects like bouncing, stop, pause, rewind, or slow down. It gives you more control than CSS.
The W3C is working on a new spec called Web Animations that aims to solve a lot of the deficiencies in CSS Animations and CSS Transitions, providing better runtime controls and extra features. That is to say, we’ll have to wait and see how things come together.
